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

いいえ。ご覧のとおり、視覚的な状態はコントロール テンプレートにあり、まったく新しいものを提供しています。

状態をリソースとして配置して各テンプレートから参照することもできますが、私はそれをお勧めしません。2 つの個別のテンプレートがあるため、ある段階でフォークする可能性が高く、再利用はオプションではありません。私見は、それらをコピーするのが最善です。Blend での生活も楽になります。

于 2012-06-20T15:01:36.980 に答える