WPF/Windows Phone/WinRT: CheckBox和RadioButton列表

這樣的效果：

WPF：

Windows Phone：

WinRT：

 

(RadioButton列表類似)。

 

實現上需要注意這幾個細節：

1. 不應出現多重Tab焦點（ListBoxItem和CheckBox都是可以擷取Tab焦點的）。

2. 整個控制項可以用鍵盤操作（這一點WPF/WP的ListBox和WinRT的ListView都沒問題）。

3. 預設列表的背景應該是透明，並且沒有任何Border。（WPF/WP/WinRT的ListBox預設都是白色背景，WPF的ListBox還有邊框，而WinRT的ListView沒有背景）

4. CheckBox列表可多選，RadioButton列表當然只能單選。

 

OK，實現起來挺簡單的，設定ItemsControl的ItemContainerStyle，在設定內部Item的模板，把ToggleButton的IsChecked和內部Item的IsChecked屬性串連起來就可以了。注意把內部Item的IsTabStop設定為False。

 

在WPF和Windows Phone中：CheckBox列表的Style（對應類型ListBox）：

<Style x:Key="CheckList" TargetType="ListBox">

     <Setter Property="Background" Value="Transparent"/>

     <Setter Property="BorderThickness" Value="0"/>

     <Setter Property="SelectionMode" Value="Multiple"/>

     <Setter Property="ItemContainerStyle">

         <Setter.Value>

             <Style TargetType="ListBoxItem">

                 <Setter Property="IsTabStop" Value="False"/>

                 <Setter Property="Template">

                     <Setter.Value>

                         <ControlTemplate TargetType="ListBoxItem">

                             <CheckBox Content="{TemplateBinding Content}" IsChecked="{Binding IsSelected,Mode=TwoWay,RelativeSource={RelativeSource Mode=TemplatedParent}}"/>

                         </ControlTemplate>

                     </Setter.Value>

                 </Setter>

             </Style>

         </Setter.Value>

     </Setter>

</Style>

 

WinRT中CheckBox的列表Style（針對類型是ListView）

<Style x:Key="CheckList" TargetType="ListView">

    <Setter Property="Background" Value="Transparent"/>

    <Setter Property="BorderThickness" Value="0"/>

    <Setter Property="SelectionMode" Value="Multiple"/>

    <Setter Property="ItemContainerStyle">

        <Setter.Value>

            <Style TargetType="ListViewItem">

                <Setter Property="IsTabStop" Value="False"/>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="ListViewItem">

                            <CheckBox Content="{TemplateBinding Content}" IsChecked="{Binding IsSelected,Mode=TwoWay,RelativeSource={RelativeSource Mode=TemplatedParent}}"/>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

        </Setter.Value>

    </Setter>

</Style>

 

至於RadioButton列表，把CheckBox列表稍作修改就OK了。

首先把樣式中的多選Setter：

<Setter Property="SelectionMode" Value="Multiple"/>

刪掉，這樣就成了預設單選模式了。

 

接著把模板中的CheckBox改成RadioButton控制項就可以了。