Post
Ask Question

Designing Toggle Button Using Blend

Here are the steps:

  1. Open a blank app and add a toggle button either using toolbox or by coding xaml.

  2. Add two smiley images to your assets folder (for ex a: sad smiley for unchecked state and happy smiley for checked state of toggle button).

  3. In Solution Explorer right click on your xaml page and select "Open with Blend."

  4. Once the solution is opened in Blend in Object and Timeline section right click on your toggle button and select 'Edit Template', then 'Edit a Copy'.

    copy

  5. Enter name for your style resource and click OK.

  6. Remove Border present inside parent grid as we will be designing a toggle button with images.

  7. Add two image controls to your grid from toolbox.

  8. Set height and width for both image controls.

  9. Set source of both images to sad and happy smiley respectively.

    source

  10. Set visibility of your happy smiley to collapsed.

  11. From states section click on "checked state," present under common states,   and set visibility of your sad image control to collapsed and happy image to visible.

  12. Do the same for CheckedPointerOver state as well.

    state

  13. Save xaml page and go back to visual studio and run.
Unchecked State

Unchecked State

Checked State

Checked State

Style for toggle button
  1. <Style x:Key="ToggleButtonStyle1" TargetType="ToggleButton">  
  2. <Setter Property="Background" Value="{ThemeResource ToggleButtonBackgroundThemeBrush}"/>  
  3. <Setter Property="Foreground" Value="{ThemeResource ToggleButtonForegroundThemeBrush}"/>  
  4. <Setter Property="BorderBrush" Value="{ThemeResource ToggleButtonBorderThemeBrush}"/>  
  5. <Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}"/>  
  6. <Setter Property="Padding" Value="12,4,12,5"/>  
  7. <Setter Property="HorizontalAlignment" Value="Left"/>  
  8. <Setter Property="VerticalAlignment" Value="Center"/>  
  9. <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>  
  10. <Setter Property="FontWeight" Value="SemiBold"/>  
  11. <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>  
  12. <Setter Property="Template">  
  13. <Setter.Value>  
  14. <ControlTemplate TargetType="ToggleButton">  
  15. <Grid>  
  16. <VisualStateManager.VisualStateGroups>  
  17. <VisualStateGroup x:Name="CommonStates">  
  18. <VisualState x:Name="Normal"/>  
  19. <VisualState x:Name="PointerOver"/>  
  20. <VisualState x:Name="Pressed"/>  
  21. <VisualState x:Name="Disabled"/>  
  22. <VisualState x:Name="Checked">  
  23. <Storyboard>  
  24. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">  
  25. <DiscreteObjectKeyFrame KeyTime="0">  
  26. <DiscreteObjectKeyFrame.Value>  
  27. <Visibility>Visible</Visibility>  
  28. </DiscreteObjectKeyFrame.Value>  
  29. </DiscreteObjectKeyFrame>  
  30. </ObjectAnimationUsingKeyFrames>  
  31. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">  
  32. <DiscreteObjectKeyFrame KeyTime="0">  
  33. <DiscreteObjectKeyFrame.Value>  
  34. <Visibility>Collapsed</Visibility>  
  35. </DiscreteObjectKeyFrame.Value>  
  36. </DiscreteObjectKeyFrame>  
  37. </ObjectAnimationUsingKeyFrames>  
  38. </Storyboard>  
  39. </VisualState>  
  40. <VisualState x:Name="CheckedPointerOver">  
  41. <Storyboard>  
  42. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">  
  43. <DiscreteObjectKeyFrame KeyTime="0">  
  44. <DiscreteObjectKeyFrame.Value>  
  45. <Visibility>Visible</Visibility>  
  46. </DiscreteObjectKeyFrame.Value>  
  47. </DiscreteObjectKeyFrame>  
  48. </ObjectAnimationUsingKeyFrames>  
  49. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">  
  50. <DiscreteObjectKeyFrame KeyTime="0">  
  51. <DiscreteObjectKeyFrame.Value>  
  52. <Visibility>Collapsed</Visibility>  
  53. </DiscreteObjectKeyFrame.Value>  
  54. </DiscreteObjectKeyFrame>  
  55. </ObjectAnimationUsingKeyFrames>  
  56. </Storyboard>  
  57. </VisualState>  
  58. <VisualState x:Name="CheckedPressed"/>  
  59. <VisualState x:Name="CheckedDisabled"/>  
  60. <VisualState x:Name="Indeterminate"/>  
  61. <VisualState x:Name="IndeterminatePointerOver"/>  
  62. <VisualState x:Name="IndeterminatePressed"/>  
  63. <VisualState x:Name="IndeterminateDisabled"/>  
  64. </VisualStateGroup>  
  65. <VisualStateGroup x:Name="FocusStates">  
  66. <VisualState x:Name="Focused">  
  67. <Storyboard>  
  68. <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>  
  69. <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>  
  70. </Storyboard>  
  71. </VisualState>  
  72. <VisualState x:Name="Unfocused"/>  
  73. <VisualState x:Name="PointerFocused"/>  
  74. </VisualStateGroup>  
  75. </VisualStateManager.VisualStateGroups>  
  76. <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>  
  77. <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>  
  78. <Image x:Name="image1" HorizontalAlignment="Left" Height="150" VerticalAlignment="Top" Width="150" Source="Assets/sad70.png"/>  
  79. <Image x:Name="image" HorizontalAlignment="Left" Height="150" VerticalAlignment="Top" Width="150" Source="Assets/smiling36.png" Visibility="Collapsed"/>  
  80. </Grid>  
  81. </ControlTemplate>  
  82. </Setter.Value>  
  83. </Setter>  
  84. </Style> 


Similar Articles