wpf 自訂RadioButton控制項樣式

標籤：style   blog   http   color   os   width   

實現的效果為：

 

我感覺來自訂RadioButton樣式和定義button空間的樣式差不多，只是類型不同而已。

 

接下來分析一下樣式代碼：

 

 <!--自訂選項按鈕樣式-->
        <Style TargetType="RadioButton">

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid Width="100"
                              Height="22">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Image Source="Images/radio01.png"  //這裡的圖片為灰色是的圖片
                                   Width="12"
                                   Height="4"
                                   x:Name="radioImage"></Image>
                            <TextBlock  x:Name="radioContent"
                                Grid.Column="1"
                                        FontFamily="Microsoft YaHei"
                                        FontWeight="Bold"
                                        FontSize="12"
                                        VerticalAlignment="Center"
                                        Foreground="#FFFFFF"
                                        Text="{TemplateBinding Content}"></TextBlock> //這裡讓它顯示的常值內容直接綁定到RadioButton的Content屬性上
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsKeyboardFocused"  //當控制項擷取焦點時要執行的內容
                                     Value="true">
                                <Setter TargetName="radioImage"
                                        Property="Width"
                                        Value="22" />
                                <Setter TargetName="radioImage"
                                        Property="Height"
                                        Value="14" />
                                <Setter TargetName="radioImage"
                                        Property="Source"
                                        Value="Images/radio02.png" /> //這是當被選中時的黃色圖片
                                <Setter TargetName="radioContent"
                                        Property="Foreground"
                                        Value="#F1DC21" />
                            </Trigger>
                            <Trigger Property="IsMouseOver"  //當滑鼠放上去時要設定的內容
                                     Value="true">
                                <Setter TargetName="radioImage"
                                        Property="Width"
                                        Value="22" />
                                <Setter TargetName="radioImage"
                                        Property="Height"
                                        Value="14" />
                                <Setter TargetName="radioImage"
                                        Property="Source"
                                        Value="Images/radio02.png" />
                                <Setter TargetName="radioContent"
                                        Property="Foreground"
                                        Value="#F1DC21" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>

                </Setter.Value>
            </Setter>
        </Style>

 

XAML中代碼為：

  <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="50,0,0,0">
            <RadioButton Content="實景模式"  //在這裡當給RadioButton的Content屬性賦值時直接對應的就是樣式中的radioContent
                         VerticalAlignment="Center"
                         Grid.Row="1"
                         Margin="3,0,0,7"
                          />
            <RadioButton Content="走線模式"
                         VerticalAlignment="Center"
                         Margin="3,0,0,7" />
            <RadioButton Content="拓撲模式"
                         VerticalAlignment="Center"
                         Margin="3,0,0,7"/>
        </StackPanel>