CheckBox 在預設的情況下是由一個正方形的框加後面的文字組成的。
在特殊的情況下，有可能需要我們用圖片替換掉前面的正方形框體
不能直接給CheckBox設置背景來實現，參見代碼：
1 <CheckBox Content="你好色彩" Margin="16,289,275,0" VerticalAlignment="Top" IsChecked="True">
2 <CheckBox.Background>
3 <ImageBrush ImageSource="images/check_normal.png"></ImageBrush>
4 </CheckBox.Background>
5 </CheckBox>
選中前：
選中後：
注意中間的「對勾」，嚴重影響視覺效果！先來看重寫CheckBox之後的效果圖：
來看代碼吧。
樣式
001 <phone:PhoneApplicationPage.Resources>
002 <Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
003 <Setter Property="Background" Value="Transparent"/>
004 <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
005 <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
006 <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
007 <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
008 <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
009 <Setter Property="Padding" Value="10,3,10,5"/>
010 <Setter Property="Template">
011 <Setter.Value>
012 <ControlTemplate TargetType="ButtonBase">
013 <Grid Background="Transparent">
014 <VisualStateManager.VisualStateGroups>
015 <VisualStateGroup x:Name="CommonStates">
016 <VisualState x:Name="Normal"/>
017 <VisualState x:Name="MouseOver"/>
018 <VisualState x:Name="Pressed">
019 <Storyboard>
020 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
021 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
022 </ObjectAnimationUsingKeyFrames>
023 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
024 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
025 </ObjectAnimationUsingKeyFrames>
026 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
027 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
028 </ObjectAnimationUsingKeyFrames>
029 </Storyboard>
030 </VisualState>
031 <VisualState x:Name="Disabled">
032 <Storyboard>
033 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
034 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
035 </ObjectAnimationUsingKeyFrames>
036 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
037 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
038 </ObjectAnimationUsingKeyFrames>
039 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
040 <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
041 </ObjectAnimationUsingKeyFrames>
042 </Storyboard>
043 </VisualState>
044 </VisualStateGroup>
045 </VisualStateManager.VisualStateGroups>
046 <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
047 <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
048 </Border>
049 </Grid>
050 </ControlTemplate>
051 </Setter.Value>
052 </Setter>
053 </Style>
054 <Style x:Key="PhoneRadioButtonCheckBoxBase" BasedOn="{StaticResource PhoneButtonBase}" TargetType="ToggleButton">
055 <Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
056 <Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
057 <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
058 <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
059 <Setter Property="HorizontalContentAlignment" Value="Left"/>
060 <Setter Property="VerticalContentAlignment" Value="Center"/>
061 <Setter Property="Padding" Value="0"/>
062 </Style>
063 <Style x:Key="CheckBoxStyle1" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="CheckBox">
064 <Setter Property="Template">
065 <Setter.Value>
066 <ControlTemplate TargetType="CheckBox">
067 <Grid Background="Transparent">
068 <VisualStateManager.VisualStateGroups>
069 <VisualStateGroup x:Name="CommonStates">
070 <VisualState x:Name="Normal"/>
071 <VisualState x:Name="MouseOver"/>
072 <VisualState x:Name="Disabled">
073 <Storyboard>
074 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
075 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxDisabledBrush}"/>
076 </ObjectAnimationUsingKeyFrames>
077 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
078 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
079 </ObjectAnimationUsingKeyFrames>
080 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
081 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"/>
082 </ObjectAnimationUsingKeyFrames>
083 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="IndeterminateMark">
084 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"/>
085 </ObjectAnimationUsingKeyFrames>
086 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
087 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
088 </ObjectAnimationUsingKeyFrames>
089 </Storyboard>
090 </VisualState>
091 </VisualStateGroup>
092 <VisualStateGroup x:Name="CheckStates">
093 <VisualState x:Name="Checked">
094 <Storyboard>
095 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckMark">
096 <DiscreteObjectKeyFrame KeyTime="0">
097 <DiscreteObjectKeyFrame.Value>
098 <Visibility>Visible</Visibility>
099 </DiscreteObjectKeyFrame.Value>
100 </DiscreteObjectKeyFrame>
101 </ObjectAnimationUsingKeyFrames>
102 </Storyboard>
103 </VisualState>
104 <VisualState x:Name="Unchecked"/>
105 <VisualState x:Name="Indeterminate">
106 <Storyboard>
107 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateMark">
108 <DiscreteObjectKeyFrame KeyTime="0">
109 <DiscreteObjectKeyFrame.Value>
110 <Visibility>Visible</Visibility>
111 </DiscreteObjectKeyFrame.Value>
112 </DiscreteObjectKeyFrame>
113 </ObjectAnimationUsingKeyFrames>
114 </Storyboard>
115 </VisualState>
116 </VisualStateGroup>
117 </VisualStateManager.VisualStateGroups>
118 <Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}">
119 <Grid.ColumnDefinitions>
120 <ColumnDefinition Width="40"/>
121 <ColumnDefinition Width="*"/>
122 </Grid.ColumnDefinitions>
123
124 <Border x:Name="CheckBackground" BorderBrush="{TemplateBinding Background}" BorderThickness="0" HorizontalAlignment="Left" Height="40" IsHitTestVisible="False" VerticalAlignment="Center" Width="40">
125 <Border.Background>
126 <ImageBrush ImageSource="images/check_normal.png"></ImageBrush>
127 </Border.Background>
128 </Border>
129 <Rectangle x:Name="IndeterminateMark" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" HorizontalAlignment="Center" Height="0" IsHitTestVisible="False" Grid.Row="0" Visibility="Collapsed" VerticalAlignment="Center" Width="0"/>
130 <Canvas x:Name="CheckMark" HorizontalAlignment="Center" Height="40" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="40">
131 <Canvas.Background>
132 <ImageBrush ImageSource="images/check_checked.png"></ImageBrush>
133 </Canvas.Background>
134 </Canvas>
135 <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="12,0,0,0" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
136 </Grid>
137 </Grid>
138 </ControlTemplate>
139 </Setter.Value>
140 </Setter>
141 </Style>
142 </phone:PhoneApplicationPage.Resources>
调用
view sourceprint?1 <CheckBox Content="你好色彩" Margin="16,89,275,0" VerticalAlignment="Top" IsChecked="True" Style="{StaticResource CheckBoxStyle1}"></CheckBox>
留言列表
