0

我正在使用自定义模板创建多个按钮。每个按钮都绑定到不同的缩略图，但我希望它们都具有相同的视觉状态。我创建了 customButtonStyle样式，每个其他按钮都将继承此样式。然而，视觉状态似乎不是从customButtonStyle继承的。

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

提前致谢。

下面是我的代码：

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

1 回答 1

1

不。正如您自己看到的那样，视觉状态驻留在控件模板中，并且您提供了一个全新的状态。

您可以尝试将状态放置为资源并从每个模板中引用它们，但我建议不要这样做。由于您有两个单独的模板，因此它们可能会在某个阶段分叉，在这种情况下，重用将不是一种选择。恕我直言，最好只是复制它们。也会让 Blend 的生活更轻松。

于 2012-06-20T15:01:36.980 回答