I min WP7-applikation har jag satt en ljus bakgrundsfärg och använt en ToggleSwitch från Silverlight for Windows Phone Toolkit. Per default anpassas ToggleSwitchen till det ljusa och mörka temat på telefonen, men tyvärr blir det knasigt i och med att jag specifierat en bakgrundsfärg som inte ändras därefter:

image
Så här ser ToggleSwitchen ut i “Light Theme” med min ljusa bakgrundsfärg…

image
…men så här ser ToggleSwitchen ut i “Dark Theme” med min ljusa bakgrundsfärg

För att få ett konsistent utseende oavsett tema-inställningar gör jag en override på ToggleSwitch stylen.

Jag lägger till markupen för att styla ToggleSwitch som en resurs och ger det namnet “MyToggleSwitchStyle”…

   1: <Style x:Name="MyToggleSwitchStyle" TargetType="toolkit:ToggleSwitch">
   2:     <Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
   3:     <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>
   4:     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>
   5:     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
   6:     <Setter Property="IsTabStop" Value="False"/>
   7:     <Setter Property="HorizontalContentAlignment" Value="Left"/>
   8:     <Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/>
   9:     <Setter Property="VerticalContentAlignment" Value="Top"/>
  10:     <Setter Property="Template">
  11:         <Setter.Value>
  12:             <ControlTemplate TargetType="toolkit:ToggleSwitch">
  13:                 <Border
  14:                     BorderBrush="{TemplateBinding BorderBrush}"
  15:                     BorderThickness="{TemplateBinding BorderThickness}"
  16:                     Padding="{TemplateBinding Padding}"
  17:                     CacheMode="BitmapCache">
  18:                     <VisualStateManager.VisualStateGroups>
  19:                         <VisualStateGroup x:Name="CommonStates">
  20:                             <VisualState x:Name="Normal"/>
  21:                             <VisualState x:Name="Disabled">
  22:                                 <Storyboard>
  23:                                     <DoubleAnimation
  24:                                         Storyboard.TargetName="Header"
  25:                                         Storyboard.TargetProperty="Opacity"
  26:                                         Duration="0"
  27:                                         To="0.3"/>
  28:                                     <DoubleAnimation
  29:                                         Storyboard.TargetName="Content"
  30:                                         Storyboard.TargetProperty="Opacity"
  31:                                         Duration="0"
  32:                                         To="0.3"/>
  33:                                 </Storyboard>
  34:                             </VisualState>
  35:                         </VisualStateGroup>
  36:                     </VisualStateManager.VisualStateGroups>
  37:                     <Grid Margin="12,5,36,42">
  38:                         <Grid.RowDefinitions>
  39:                             <RowDefinition Height="Auto"/>
  40:                             <RowDefinition Height="Auto"/>
  41:                         </Grid.RowDefinitions>
  42:                         <Grid.ColumnDefinitions>
  43:                             <ColumnDefinition Width="*"/>
  44:                             <ColumnDefinition Width="Auto"/>
  45:                         </Grid.ColumnDefinitions>
  46:                         <ContentControl
  47:                             x:Name="Header"
  48:                             Content="{TemplateBinding Header}"
  49:                             ContentTemplate="{TemplateBinding HeaderTemplate}"
  50:                             FontFamily="{StaticResource PhoneFontFamilyNormal}"
  51:                             FontSize="{StaticResource PhoneFontSizeNormal}"
  52:                             Foreground="{StaticResource PhoneBorderBrush}"
  53:                             HorizontalAlignment="Left"
  54:                             IsTabStop="False"
  55:                             Margin="-1,0,0,0"
  56:                             Opacity="{TemplateBinding Opacity}"
  57:                             VerticalAlignment="Bottom"/>
  58:                         <ContentControl
  59:                             x:Name="Content"
  60:                             Grid.Row="1"
  61:                             Content="{TemplateBinding Content}"
  62:                             ContentTemplate="{TemplateBinding ContentTemplate}"
  63:                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
  64:                             IsTabStop="False"
  65:                             Margin="-1,1,0,-7"
  66:                             Opacity="{TemplateBinding Opacity}"
  67:                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  68:                         <primitives:ToggleSwitchButton
  69:                             x:Name="Switch"
  70:                             Grid.RowSpan="2"
  71:                             Grid.Column="1"
  72:                             Background="{TemplateBinding Background}"
  73:                             Margin="-22,-29,-24,-28"
  74:                             Opacity="{TemplateBinding Opacity}"
  75:                             SwitchForeground="{TemplateBinding SwitchForeground}"
  76:                             VerticalAlignment="Bottom"/>
  77:                     </Grid>
  78:                 </Border>
  79:             </ControlTemplate>
  80:         </Setter.Value>
  81:     </Setter>
  82: </Style>
  83: <Style TargetType="primitives:ToggleSwitchButton">
  84:     <Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
  85:     <Setter Property="IsTabStop" Value="False"/>
  86:     <Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/>
  87:     <Setter Property="Template">
  88:         <Setter.Value>
  89:             <ControlTemplate TargetType="primitives:ToggleSwitchButton">
  90:                 <Border
  91:                     x:Name="Root"
  92:                     BorderBrush="{TemplateBinding BorderBrush}"
  93:                     BorderThickness="{TemplateBinding BorderThickness}"
  94:                     CacheMode="BitmapCache"
  95:                     Opacity="{TemplateBinding Opacity}"
  96:                     Padding="{TemplateBinding Padding}">
  97:                     <VisualStateManager.VisualStateGroups>
  98:                         <VisualStateGroup x:Name="CommonStates">
  99:                             <VisualState x:Name="Normal"/>
 100:                             <VisualState x:Name="Disabled">
 101:                                 <Storyboard>
 102:                                     <ColorAnimation
 103:                                         Storyboard.TargetName="SwitchBottom"
 104:                                         Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"
 105:                                         Duration="0"
 106:                                         To="{StaticResource PhoneForegroundColor}"/>
 107:                                     <ColorAnimation
 108:                                         Storyboard.TargetName="ThumbCenter"
 109:                                         Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
 110:                                         Duration="0"
 111:                                         To="{StaticResource PhoneForegroundColor}"/>
 112:                                     <DoubleAnimation
 113:                                         Storyboard.TargetName="Root"
 114:                                         Storyboard.TargetProperty="Opacity"
 115:                                         Duration="0"
 116:                                         To="0.3"/>
 117:                                 </Storyboard>
 118:                             </VisualState>
 119:                         </VisualStateGroup>
 120:                         <VisualStateGroup x:Name="CheckStates">
 121:                             <VisualStateGroup.Transitions>
 122:                                 <VisualTransition GeneratedDuration="0:0:0.05" To="Unchecked"/>
 123:                                 <VisualTransition GeneratedDuration="0:0:0.05" To="Checked"/>
 124:                             </VisualStateGroup.Transitions>
 125:                             <VisualState x:Name="Checked">
 126:                                 <Storyboard>
 127:                                     <DoubleAnimation
 128:                                         Storyboard.TargetName="BackgroundTranslation"
 129:                                         Storyboard.TargetProperty="(TranslateTransform.X)"
 130:                                         Duration="0"
 131:                                         To="68">
 132:                                         <DoubleAnimation.EasingFunction>
 133:                                             <ExponentialEase Exponent="15" EasingMode="EaseOut"/>
 134:                                         </DoubleAnimation.EasingFunction>
 135:                                     </DoubleAnimation>
 136:                                     <DoubleAnimation
 137:                                         Storyboard.TargetName="ThumbTranslation"
 138:                                         Storyboard.TargetProperty="(TranslateTransform.X)"
 139:                                         Duration="0"
 140:                                         To="68">
 141:                                         <DoubleAnimation.EasingFunction>
 142:                                             <ExponentialEase Exponent="15" EasingMode="EaseOut"/>
 143:                                         </DoubleAnimation.EasingFunction>
 144:                                     </DoubleAnimation>
 145:                                 </Storyboard>
 146:                             </VisualState>
 147:                             <VisualState x:Name="Dragging"/>
 148:                             <VisualState x:Name="Unchecked">
 149:                                 <Storyboard>
 150:                                     <DoubleAnimation
 151:                                         Storyboard.TargetName="BackgroundTranslation"
 152:                                         Storyboard.TargetProperty="(TranslateTransform.X)"
 153:                                         Duration="0"
 154:                                         To="0"/>
 155:                                     <DoubleAnimation
 156:                                         Storyboard.TargetName="ThumbTranslation"
 157:                                         Storyboard.TargetProperty="(TranslateTransform.X)"
 158:                                         Duration="0"
 159:                                         To="0"/>
 160:                                 </Storyboard>
 161:                             </VisualState>
 162:                         </VisualStateGroup>
 163:                     </VisualStateManager.VisualStateGroups>
 164:                     <Grid x:Name="SwitchRoot" Background="Transparent" Height="95" Width="136">
 165:                         <Grid x:Name="SwitchTrack" Width="88">
 166:                             <Grid x:Name="SwitchBottom" Background="{TemplateBinding SwitchForeground}" Height="32">
 167:                                 <Rectangle
 168:                                     x:Name="SwitchBackground"
 169:                                     Fill="{TemplateBinding Background}"
 170:                                     Width="76"
 171:                                     Height="20"
 172:                                     HorizontalAlignment="Center"
 173:                                     VerticalAlignment="Center">
 174:                                     <Rectangle.RenderTransform>
 175:                                         <TranslateTransform x:Name="BackgroundTranslation"/>
 176:                                     </Rectangle.RenderTransform>
 177:                                 </Rectangle>
 178:                                 <Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="2">
 179:                                     <Border BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="4"/>
 180:                                 </Border>
 181:                             </Grid>
 182:                             <Border
 183:                                 x:Name="SwitchThumb"
 184:                                 BorderBrush="{StaticResource PhoneBackgroundBrush}"
 185:                                 BorderThickness="4,0"
 186:                                 Margin="-4,0"
 187:                                 Width="28"
 188:                                 Height="36"
 189:                                 HorizontalAlignment="Left">
 190:                                 <Border.RenderTransform>
 191:                                     <TranslateTransform x:Name="ThumbTranslation"/>
 192:                                 </Border.RenderTransform>
 193:                                 <Border
 194:                                     x:Name="ThumbCenter"
 195:                                     BorderBrush="{StaticResource PhoneForegroundBrush}"
 196:                                     BorderThickness="2"
 197:                                     Background="White"/>
 198:                             </Border>
 199:                         </Grid>
 200:                     </Grid>
 201:                 </Border>
 202:             </ControlTemplate>
 203:         </Setter.Value>
 204:     </Setter>
 205: </Style>
 206:  


…och uppdaterar ToggleSwitch så att den använder sig av “MyToggleSwitchStyle”.

   1: <toolkit:ToggleSwitch Header="Wi Fi networking" Style="{StaticResource MyToggleSwitchStyle}"/>


I Expression Blend högerklickar jag sedan på min ToggleSwitch och väljer “Edit Template” –> “Edit Current” och kan då direkt se resultatet av de utseendemässiga förändringarna jag gör. Härifrån kan jag nu sätta de värden jag vill ha på de olika delarna av ToggleSwitch och se till att den får ett konsistent utseende oavsett tema-inställningar.

image