Skip to content

Instantly share code, notes, and snippets.

@Grabacr07

Grabacr07/ToggleButtonSample.xaml

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Grabacr07/9428996 to your computer and use it in GitHub Desktop.
Save Grabacr07/9428996 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ToggleButtonSample.xaml
<StackPanel x:Name="LayoutRoot"
Background="White">
<TextBlock FontFamily="Segoe UI Light">
<Run Text="ToggleButton Sample "
FontSize="20" />
<Run Text="(Silverlight)"
FontSize="16" />
</TextBlock>
<StackPanel Orientation="Horizontal">
<ToggleButton x:Name="ToggleButton"
Content="Mute button (ThreeState)"
IsThreeState="True"
Padding="20,5"
Margin="10"
VerticalAlignment="Center">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="border"
BorderThickness="1"
Background="Gainsboro"
BorderBrush="Gray">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0"
To="#FFDCC8DC"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="border"
d:IsOptimized="True" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0"
To="#FFC8A0C8"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="border"
d:IsOptimized="True" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Data)"
Storyboard.TargetName="Path">
<DiscreteObjectKeyFrame KeyTime="0"
Value="M4.5019531,9.6888027 L5.703125,9.6888027 C5.8203125,9.6888027 5.9293618,9.7099619 6.0302734,9.7522793 C6.1311846,9.7945976 6.2190752,9.8531914 6.2939453,9.9280605 C6.3688149,10.002931 6.4274087,10.090821 6.4697266,10.191732 C6.512044,10.292645 6.5332026,10.398438 6.5332031,10.509115 L6.5332031,16.495443 C6.5332026,16.606121 6.512044,16.711914 6.4697266,16.812826 C6.4274087,16.913738 6.3688149,17.001629 6.2939453,17.076498 C6.2190752,17.151367 6.1311846,17.209961 6.0302734,17.252279 C5.9293618,17.294598 5.8203125,17.315756 5.703125,17.315756 L4.5019531,17.315756 C4.3847656,17.315756 4.2773438,17.294598 4.1796875,17.252279 C4.0820313,17.209961 3.9957681,17.151367 3.9208984,17.076498 C3.8460283,17.001629 3.7874346,16.913738 3.7451172,16.812826 C3.7027993,16.711914 3.6816406,16.606121 3.6816406,16.495443 L3.6816406,10.509115 C3.6816406,10.398438 3.7027993,10.292645 3.7451172,10.191732 C3.7874346,10.090821 3.8460283,10.002931 3.9208984,9.9280605 C3.9957681,9.8531914 4.0820313,9.7945976 4.1796875,9.7522793 C4.2773438,9.7099619 4.3847656,9.6888027 4.5019531,9.6888027 z M15.966797,9.0345058 L19.189453,12.247396 L22.402344,9.0345058 L23.476563,10.108725 L20.253906,13.321615 L23.476563,16.534506 L22.353516,17.579428 L19.189453,14.395834 L15.966797,17.608725 L14.892578,16.534506 L18.115234,13.321615 L14.892578,10.108725 z M13.867188,4.4153652 C13.958332,4.4153652 14.029947,4.4576836 14.082031,4.5423183 C14.134114,4.626955 14.160156,4.7506523 14.160156,4.9134121 L14.160156,22.100912 C14.160156,22.257162 14.132486,22.377605 14.077148,22.46224 C14.02181,22.546875 13.948567,22.589193 13.857422,22.589193 C13.740233,22.589193 13.61328,22.520834 13.476563,22.384115 L8.1738281,17.325521 C8.0761719,17.227865 7.9850254,17.113934 7.9003906,16.983725 C7.8157549,16.853516 7.7425127,16.718426 7.6806641,16.578451 C7.6188145,16.438477 7.5716143,16.296875 7.5390625,16.153646 C7.5065103,16.010418 7.4902344,15.873699 7.4902344,15.74349 L7.4902344,11.261068 C7.4902344,11.137371 7.5081377,11.000652 7.5439453,10.850912 C7.5797524,10.701173 7.6285806,10.554688 7.6904297,10.411459 C7.7522783,10.26823 7.8238931,10.133139 7.9052734,10.006186 C7.9866533,9.8792324 8.0761719,9.7701836 8.1738281,9.6790371 L13.476563,4.6204433 C13.619791,4.4837246 13.75,4.4153652 13.867188,4.4153652 z" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Data)"
Storyboard.TargetName="Path">
<DiscreteObjectKeyFrame KeyTime="0"
Value="M15.205078,8.6438808 C15.934244,8.6438808 16.660156,8.7382822 17.382813,8.927084 C18.105469,9.1158867 18.795572,9.3600273 19.453125,9.6595058 C20.110676,9.9589853 20.722656,10.292645 21.289063,10.660482 C21.855469,11.028321 22.345377,11.388021 22.758789,11.739584 C23.172199,12.091146 23.496094,12.416668 23.730469,12.716146 C23.964842,13.015626 24.082029,13.246746 24.082031,13.409506 C23.424479,13.00586 22.701822,12.638021 21.914063,12.30599 C21.57552,12.169271 21.207682,12.030926 20.810547,11.890951 C20.41341,11.750978 19.990234,11.625652 19.541016,11.514975 C19.091797,11.404298 18.623047,11.309896 18.134766,11.231771 C17.646484,11.153646 17.141926,11.104818 16.621094,11.085287 L16.621094,21.339193 C16.621094,21.801434 16.554361,22.240887 16.420898,22.657553 C16.287434,23.074219 16.088867,23.459961 15.825195,23.814779 C15.561523,24.169598 15.236002,24.48698 14.848633,24.766928 C14.461262,25.046875 14.013671,25.277996 13.505859,25.460287 C12.9069,25.681641 12.291666,25.792318 11.660156,25.792318 C11.25,25.792318 10.859375,25.74349 10.488281,25.645834 C10.117188,25.548178 9.7819004,25.411459 9.4824219,25.235678 C9.1829424,25.059896 8.9241533,24.84668 8.7060547,24.596029 C8.4879551,24.345379 8.3235674,24.063803 8.2128906,23.751303 C8.1022129,23.438803 8.046875,23.129559 8.046875,22.823568 C8.046875,22.445965 8.1217442,22.066732 8.2714844,21.685873 C8.4212236,21.305014 8.6328125,20.946941 8.90625,20.611654 C9.1796875,20.276367 9.5084629,19.972006 9.8925781,19.698568 C10.276692,19.425131 10.703125,19.203777 11.171875,19.034506 C11.770832,18.813152 12.386066,18.702475 13.017578,18.702475 C13.349609,18.702475 13.647461,18.735027 13.911133,18.800131 C14.174805,18.865234 14.443359,18.959637 14.716797,19.083334 L14.716797,9.1321621 z M7.578125,1.0169277 C8.307291,1.0169277 9.0332031,1.11133 9.7558594,1.300131 C10.478516,1.4889336 11.170247,1.7330742 11.831055,2.0325527 C12.491861,2.3320332 13.103841,2.6656914 13.666992,3.033529 C14.230143,3.4013691 14.720052,3.7610683 15.136719,4.1126308 C15.553385,4.4641933 15.878905,4.7880878 16.113281,5.0843105 C16.347656,5.3805351 16.464844,5.6100273 16.464844,5.7727871 C15.807291,5.3691425 15.084635,5.0045586 14.296875,4.6790371 C13.958333,4.5423183 13.590494,4.4055996 13.193359,4.2688808 C12.796223,4.1321621 12.373046,4.0068378 11.923828,3.8929043 C11.474609,3.7789726 11.005859,3.6845722 10.517578,3.6097014 C10.029297,3.534832 9.5247393,3.4876308 9.0039063,3.4680996 L9.0039063,13.702475 C9.0039063,14.164715 8.9371738,14.605795 8.8037109,15.025717 C8.6702471,15.445639 8.4716797,15.833009 8.2080078,16.187826 C7.9443359,16.542645 7.6188149,16.860027 7.2314453,17.139975 C6.8440752,17.419922 6.3964839,17.651043 5.8886719,17.833334 C5.2636719,18.061199 4.6451821,18.175131 4.0332031,18.175131 C3.6230469,18.175131 3.2340493,18.126303 2.8662109,18.028646 C2.4983723,17.93099 2.1647134,17.794271 1.8652343,17.61849 C1.5657551,17.442709 1.3053385,17.227865 1.0839844,16.973959 C0.86263019,16.720053 0.69661456,16.43685 0.58593744,16.12435 C0.47526041,15.81185 0.41992188,15.49935 0.41992182,15.18685 C0.41992188,14.802735 0.49479166,14.421876 0.64453107,14.044271 C0.79427081,13.666668 1.0058594,13.31185 1.2792969,12.979818 C1.5527344,12.647787 1.8815104,12.345053 2.2656252,12.071615 C2.6497395,11.798178 3.0761719,11.576824 3.5449219,11.407553 C4.1438799,11.186199 4.7591143,11.075521 5.390625,11.075521 C5.7226563,11.075521 6.0221353,11.109701 6.2890625,11.178061 C6.5559893,11.24642 6.8261719,11.342449 7.0996094,11.466146 L7.0996094,1.5052091 z" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Horizontal"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<Path x:Name="Path"
Data="M4.5019531,9.6888027 L5.703125,9.6888027 C5.8203125,9.6888027 5.9293618,9.7099619 6.0302734,9.7522793 C6.1311846,9.7945976 6.2190752,9.8531914 6.2939453,9.9280605 C6.3688149,10.002931 6.4274087,10.090821 6.4697266,10.191732 C6.512044,10.292645 6.5332026,10.398438 6.5332031,10.509115 L6.5332031,16.495443 C6.5332026,16.606121 6.512044,16.711914 6.4697266,16.812826 C6.4274087,16.913738 6.3688149,17.001629 6.2939453,17.076498 C6.2190752,17.151367 6.1311846,17.209961 6.0302734,17.252279 C5.9293618,17.294598 5.8203125,17.315756 5.703125,17.315756 L4.5019531,17.315756 C4.3847656,17.315756 4.2773438,17.294598 4.1796875,17.252279 C4.0820313,17.209961 3.9957681,17.151367 3.9208982,17.076498 C3.8460283,17.001629 3.7874346,16.913738 3.7451174,16.812826 C3.7027993,16.711914 3.6816406,16.606121 3.6816406,16.495443 L3.6816406,10.509115 C3.6816406,10.398438 3.7027993,10.292645 3.7451174,10.191732 C3.7874346,10.090821 3.8460283,10.002931 3.9208982,9.9280605 C3.9957681,9.8531914 4.0820313,9.7945976 4.1796875,9.7522793 C4.2773438,9.7099619 4.3847656,9.6888027 4.5019531,9.6888027 z M16.689453,9.6790371 C17.021484,9.8678398 17.325846,10.095704 17.602539,10.362631 C17.87923,10.629559 18.115234,10.92741 18.310547,11.256186 C18.505859,11.584962 18.657227,11.939779 18.764648,12.320639 C18.87207,12.701498 18.925781,13.097006 18.925781,13.507162 C18.925781,13.917318 18.87207,14.311199 18.764648,14.688803 C18.657227,15.066407 18.505859,15.41797 18.310547,15.74349 C18.115234,16.069012 17.87923,16.366863 17.602539,16.637045 C17.325846,16.907227 17.021484,17.136719 16.689453,17.325521 L16.201172,16.339193 C16.689453,16.046225 17.080078,15.652345 17.373047,15.157553 C17.666016,14.662762 17.8125,14.112631 17.8125,13.507162 C17.8125,12.895184 17.666016,12.341798 17.373047,11.847006 C17.080078,11.352215 16.689453,10.958334 16.201172,10.665365 z M18.681641,6.7005215 C19.287109,7.0260429 19.837238,7.4264336 20.332031,7.9016933 C20.826822,8.3769541 21.253254,8.9075527 21.611328,9.4934902 C21.9694,10.079428 22.246094,10.710938 22.441406,11.388021 C22.636719,12.065105 22.734375,12.771485 22.734375,13.507162 C22.734375,14.24284 22.636719,14.947592 22.441406,15.62142 C22.246094,16.295248 21.9694,16.925131 21.611328,17.511068 C21.253254,18.097006 20.826822,18.625977 20.332031,19.097982 C19.837238,19.569988 19.287109,19.96875 18.681641,20.294271 L18.183594,19.307943 C18.697916,19.027996 19.166666,18.68457 19.589844,18.27767 C20.01302,17.87077 20.375977,17.418295 20.678711,16.920248 C20.981445,16.422201 21.21582,15.885092 21.381836,15.30892 C21.547852,14.732748 21.630859,14.132162 21.630859,13.507162 C21.630859,12.882162 21.547852,12.279949 21.381836,11.700521 C21.21582,11.121095 20.981445,10.582357 20.678711,10.084311 C20.375977,9.5862646 20.01302,9.133791 19.589844,8.7268887 C19.166666,8.3199883 18.697916,7.9765635 18.183594,7.6966152 z M13.867188,4.4153652 C13.958332,4.4153652 14.029947,4.4576836 14.082031,4.5423183 C14.134114,4.626955 14.160156,4.7506523 14.160156,4.9134121 L14.160156,22.100912 C14.160156,22.257162 14.132486,22.377605 14.077148,22.46224 C14.02181,22.546875 13.948567,22.589193 13.857422,22.589193 C13.740233,22.589193 13.61328,22.520834 13.476563,22.384115 L8.1738281,17.325521 C8.0761719,17.227865 7.9850254,17.113934 7.9003906,16.983725 C7.8157549,16.853516 7.7425127,16.718426 7.6806641,16.578451 C7.6188145,16.438477 7.5716143,16.296875 7.5390625,16.153646 C7.5065103,16.010418 7.4902344,15.873699 7.4902344,15.74349 L7.4902344,11.261068 C7.4902344,11.137371 7.5081377,11.000652 7.5439453,10.850912 C7.5797524,10.701173 7.6285806,10.554688 7.6904297,10.411459 C7.7522783,10.26823 7.8238931,10.133139 7.9052734,10.006186 C7.9866533,9.8792324 8.0761719,9.7701836 8.1738281,9.6790371 L13.476563,4.6204433 C13.619791,4.4837246 13.75,4.4153652 13.867188,4.4153652 z"
Stretch="Uniform"
Fill="{TemplateBinding Foreground}"
Width="25"
Height="25"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<ContentPresenter Margin="5,0,0,0"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</StackPanel>
</Border>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<CheckBox Content="ボタンと連動するチェックボックス"
IsChecked="{Binding ElementName=ToggleButton, Path=IsChecked, Mode=TwoWay}"
IsThreeState="True"
Padding="5,0,0,0"
Margin="10"
VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment