ControlTemplate을 스타일로 사용하여 단추를 다시 만들었습니다.이 배경에는 Background를 Black으로, Foreground를 White로 바꾸는 VisualStateManager MouseOver 상태가 있습니다.ControlTemplate과 내용 모두에 VisualStateManager 적용하기
다음이 스타일 단추를 사용하여 채우기 속성이 검정으로 설정된 Path 개체를 호스팅 할 수 있습니다.
경로의 ControlTemplate 자체로 이동하지 않고도 MouseOver 상태가 트리거 될 때 Button 내용에 포함 된 Path 개체의 Fill 속성을 변경하면 어떻게 할 수 있습니까? 이는 각각에 대해 별도의 스타일을 만드는 것을 의미합니다. 단추?
채우기가 Button의 Visual State Manager "컨텍스트"외부에 있습니다.
ⅰ) ControlTemplate TargetType="Button"의 Border x:Name="Background"에서 아마 바로 Grid 내부합니다 (Button의 내부에 Path를 가져와), 그에게 Button의 시각적 상태 관리자에서 사용할 수있는 x:Name을 제공 :이 문제를 처리하는 두 가지 방법을 참조 .
ii) Path 콘텐츠를 Button 콘텐츠로 사용하고이 Button 콘텐츠에 대한 전용 Visual State Manager를 추가하십시오. 콘텐츠에 i:EventTrigger EventName="Click" (see an example of this)을 사용하게됩니다.
동일한 버튼에 대해 서로 다른 Path 영상을 사용하려면 이러한 대안 중 하나를 사용하여 DRY 원칙을 위반해야합니다. (사용자 정의 컨트롤을 만드는 것이 궁극적 인 솔루션이지만 여기에서는 속도와 단기 편의의 이점을 잃어 가고 있습니다.)
다음의 예는 옵션 (i)를 사용하고 보이는 this 같은 :
이 :
<UserControl x:Class="rasx.Buttons.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<ControlTemplate x:Key="ButterflyPathTemplate" TargetType="ContentControl">
<Canvas x:Name="BackgroundCanvas"
Width="140" Height="90">
<!--http://www.thexamlproject.com/#/artwork/437-->
<!--Butterfly:-->
<Path
Data="F1 M 133.242,3.82999C 133.103,2.12811 130.674,0.701721 129.535,0.36969C 109.54,-5.44736 77.5898,30.2498 70.3398,38.7362L 70.3606,38.386C 70.3763,38.2512 70.3841,38.1152 70.3841,37.9765C 70.3841,35.8977 68.6992,34.2134 66.621,34.2134C 64.5436,34.2134 62.86,35.8977 62.86,37.9765C 62.86,38.1152 62.8691,38.2512 62.8835,38.386L 62.9036,38.7362C 55.6529,30.2498 23.7012,-5.44736 3.70638,0.36969C 2.56775,0.701721 0.137329,2.12689 0,3.82999C -0.330811,7.9361 1.14774,11.3326 3.84241,13.9817C 14.5253,24.4817 11.093,34.8846 14.0865,41.6177C 15.8437,45.5721 28.8476,46.5057 25.9505,47.5474C -1.51242,57.4354 31.4427,94.563 46.8196,85.3365C 52.6581,81.8339 62.7916,64.5942 64.2238,62.1269L 64.916,74.3352C 64.916,75.2766 65.6784,76.0396 66.6197,76.0396C 67.5625,76.0396 68.3241,75.2766 68.3241,74.3352L 69.0169,62.1269C 70.4478,64.5942 80.582,81.8339 86.4205,85.3365C 101.799,94.563 134.754,57.4354 107.292,47.5474C 104.393,46.5057 117.397,45.5721 119.155,41.6177C 122.147,34.8846 118.715,24.4803 129.398,13.9817C 132.092,11.3326 133.573,7.93475 133.242,3.82999 Z "
Fill="{TemplateBinding Foreground}"
Stretch="Uniform"
Width="133.334" Height="87.0643"
/>
</Canvas>
</ControlTemplate>
<ControlTemplate x:Key="ButterflyPathButtonTemplate" TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal">
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Duration="0"
Storyboard.TargetName="BackgroundContent"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red"
/>
<ColorAnimation
Duration="0"
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red"
/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation
Duration="0"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="Background"
To="Red"
/>
<ColorAnimation
Duration="0"
Storyboard.TargetName="BackgroundContent"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="White"
/>
<ColorAnimation
Duration="0"
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="White"
/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation
Duration="0"
Storyboard.TargetName="BackgroundContent"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Gray"
/>
<ColorAnimation
Duration="0"
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Gray"
/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused" />
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="Background"
Background="Transparent">
<!-- TODO: build custom control with BackgroundContentTemplate property needed? -->
<ContentControl x:Name="BackgroundContent"
Foreground="{TemplateBinding Foreground}"
Template="{StaticResource ButterflyPathTemplate}" Background="Black"
/>
</Grid>
</Border>
<!--Default ContentPresenter changed to TextBlock:-->
<TextBlock x:Name="ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Text="{TemplateBinding Content}"
/>
<Rectangle x:Name="DisabledVisualElement"
IsHitTestVisible="false"
Opacity="0"
/>
<Rectangle x:Name="FocusVisualElement"
IsHitTestVisible="false"
Opacity="0"
/>
</Grid>
</ControlTemplate>
<Style x:Key="VectorButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Foreground" Value="Green" />
<Setter Property="Padding" Value="0,90,0,0" />
<Setter Property="Template" Value="{StaticResource ButterflyPathButtonTemplate}" />
</Style>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Button
Content="Yes"
Style="{StaticResource VectorButtonStyle}"
/>
<Button Grid.Row="1"
Content="Nope"
IsEnabled="False"
Style="{StaticResource VectorButtonStyle}"
/>
</Grid>
</UserControl>