2012-06-20 71 views
0

我正在用自定义模板创建多个按钮。每个按钮都绑定到不同的缩略图图像,但我希望它们都具有相同的视觉状态。我创建了customButtonStyle风格,并且每个其他按钮都将继承此风格。然而,似乎这些视觉状态不是从customButtonStyle继承的。basedOn是否继承视觉状态?

关于为什么它不会继承视觉状态的任何想法?以及如何将每个按钮设置为其自己的缩略图?

在此先感谢。

这里是我下面的代码:

<Style x:Key="customButtonStyle" TargetType="Button"> 
    <Setter Property="Background" Value="{StaticResource ApplicationButtonBackgroundBrush}"/> 
    <Setter Property="Foreground" Value="White"/> 
    <Setter Property="BorderBrush"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFA3AEB9" Offset="0"/> 
       <GradientStop Color="#FF8399A9" Offset="0.375"/> 
       <GradientStop Color="#FF718597" Offset="0.375"/> 
       <GradientStop Color="#FF617584" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 

    <Setter Property="BorderThickness" Value="0"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="Padding" Value="0"/> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid x:Name="ControlRoot" RenderTransformOrigin="0.5,0.5"> 

        <Grid.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform/> 
          <SkewTransform/> 
          <RotateTransform/> 
          <TranslateTransform/> 
         </TransformGroup> 
        </Grid.RenderTransform> 


        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualStateGroup.Transitions> 
           <!--Take one half second to transition to the MouseOver state.--> 
           <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.3"/> 

           <!-- From Button Press to Normal --> 
           <VisualTransition From="Pressed" To="Normal"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ControlRoot"> 
              <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/> 
              <EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseOut" Exponent="3"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ControlRoot"> 
              <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/> 
              <EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <ExponentialEase EasingMode="EaseOut" Exponent="3"/> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
          </VisualStateGroup.Transitions> 

          <!-- Dpad focus on button--> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ControlRoot"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1"> 
              <EasingDoubleKeyFrame.EasingFunction> 
               <ExponentialEase EasingMode="EaseOut" Exponent="3"/> 
              </EasingDoubleKeyFrame.EasingFunction> 
             </EasingDoubleKeyFrame> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ControlRoot"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/> 
             <EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1"> 
              <EasingDoubleKeyFrame.EasingFunction> 
               <ExponentialEase EasingMode="EaseOut" Exponent="3"/> 
              </EasingDoubleKeyFrame.EasingFunction> 
             </EasingDoubleKeyFrame> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState>      
          <!-- Button Press-->    
          <VisualState x:Name="Pressed"/> 
          <!-- Disabled --> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ControlRoot"/> 
           </Storyboard> 
          </VisualState>    
          <!-- End of stateGrouop --> 
         </VisualStateGroup> 


         <!-- Focus states --> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusVisualElement"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusFill"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 


          </VisualState> 
          <VisualState x:Name="Unfocused"/> 

         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <!-- Draw border around button that is in focus --> 
        <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> 
         <Grid> 
          <!--<Image x:Name="ButtonImage" Width="208" Height="156" Source="{Binding tile1}"/>--> 
          <Rectangle x:Name="FocusFill" Fill="{StaticResource ApplicationButtonHoverBackgroundBrush}" Visibility="Collapsed"/> 
          <Rectangle x:Name="MouseOverFill" Fill="{StaticResource ApplicationButtonHoverBackgroundBrush}" Visibility="Collapsed"/> 
         </Grid> 
        </Border> 
        <Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="{StaticResource ApplicationButtonFocusBackgroundBrush}" BorderThickness="5" Margin="-2.5"/> 
        <Border x:Name="MouseOverVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="{StaticResource ApplicationButtonFocusBackgroundBrush}" BorderThickness="5" Margin="-2.5"/> 

       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

///////////////////////////

<Style x:Key="tile6" TargetType="Button" BasedOn="{StaticResource customButtonStyle}"> 
    <Setter Property="BorderThickness" Value="3"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Padding" Value="0,0,1,1"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 

        <Image x:Name="ButtonImage" Width="208" Height="156" Source="{Binding tile1}"/>    

      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

回答

1

不可以。您可以亲自看到,视觉状态驻留在控件模板中,并且您正在提供一个全新的视觉状态。

您可以尝试将状态作为资源并从每个模板中引用它们,但我会建议不要这样做。既然你有两个单独的模板,他们可能会在某个阶段进行分支,在这个阶段中不能重用。恕我直言,最好只是复制它们。 Blend也会让生活更轻松。