1. 首頁
  2. 問答
  3. 將VisualStateManager應用於ControlTemplate和Content

將VisualStateManager應用於ControlTemplate和Content

2012-05-02 19 views
0

我使用樣式中的ControlTemplate重新設置了一個Button，其中包含一個將Background背景轉換爲Black並將Foreground轉換爲White的VisualStateManager MouseOver狀態。將VisualStateManager應用於ControlTemplate和Content

然後，我使用此樣式化按鈕來託管一個Path對象，其Fill屬性設置爲Black。

當MouseOver狀態被觸發時，如何將包含在Button內容中的Path對象的Fill屬性更改爲White，而無需將Path移動到ControlTemplate本身，這意味着爲每個對象創建一個單獨的Style按鈕？

來源

2012-05-02 Duncan Watts

回答

1

您的填充位於Button的視覺狀態管理器「上下文」之外。我看到兩種方法來解決這個問題：

我）把你的Path的Button內（可能是正確的Grid內ControlTemplate TargetType="Button"的Border x:Name="Background"下），給它一個x:Name與Button的視覺狀態管理使用。

ii）使用您的Path作爲Button內容，然後爲此Button內容添加專用的視覺狀態管理器。您可能會使用i:EventTrigger EventName="Click"作爲您的內容（see an example of this）。

如果您想要使用不同的Path視覺效果實質上是相同的按鈕，則必須使用這兩種選擇之一違反DRY原則。 （進行自定義控制是最終的解決方案，但在這裏您正在失去速度和短期便利的好處）。

下面的示例使用選項（i）和看起來像this：

Vector Based Button Violating the DRY Principle

和此：

<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>

來源

2012-07-25 04:55:15 rasx

相關問題

 相關問題