Question

假设我有一个样式按钮，其内容如下：

<Button x:Name="exampleButton"
        Style="{StaticResource exampleButtonStyle}">
    <StackPanel>
    <TextBlock Name="firstTextBlock"
               Text="{Binding firstText}" />
    <TextBlock Name="secondTextBlock"
               Text="{Binding secondtext}" />
    </StackPanel>
</Button>

这些TextBlocks绑定到声明 exampleButton 的页面的ViewModel。

exampleButtonStyle 如下：

<Style x:Key="exampleButtonStyle"
       TargetType="Control">
    <Setter Property="Background" Value="Transparent" />
    ...
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="rootGrid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                ...
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Focused" />
                            <VisualState x:Name="Pressed" />
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="exampleButtonContentPresenter" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

现在，我希望 firstTextBlock 和 secondTextBlock 具有两个不同的前景画笔。当 exampleButton 输入 PointerOver VisualState时，两个画笔都需要更改为不同的颜色（也要不同）。

实现此目标的最佳方法是什么？

Answer 1

您可以直接在ControlTemplate按钮中设置文本块。然后，在触发“ PointerOver”时，前景笔刷将发生变化。第一个块从绿色变为红色，第二个块从绿色变为橙色。

更新：如果要将文本块的文本绑定到视图模型，请首先声明 DataContext 。

this.DataContext = ViewModel;

或

<Page.DataContext>
        <viewmodel:ViewModel x:Name="viewModelInDataContext"/>
</Page.DataContext>

然后使用 Binding 将属性绑定到textBlock。

<Style x:Key="exampleButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <!--Change the SolidColorBrush, ButtonBrush, to red when the
            Pointer is over the button.-->
                                    <VisualState x:Name="PointerOver">

                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red"  Duration="0"/>
                                            <ColorAnimation Storyboard.TargetName="ButtonBrush2" 
                            Storyboard.TargetProperty="Color" To="Orange"  Duration="0"/>
                                        </Storyboard>

                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <StackPanel Height="100">
                                <TextBlock Name="firstTextBlock"
               Text="{Binding String1}" Height="50">
                                    <TextBlock.Foreground>
                                        <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
                                    </TextBlock.Foreground>
                                </TextBlock>
                                <TextBlock Name="secondTextBlock"
               Text="{Binding String2}" Height="50">
                                    <TextBlock.Foreground>
                                        <SolidColorBrush x:Name="ButtonBrush2" Color="Green"/>
                                    </TextBlock.Foreground>
                                </TextBlock>
                            </StackPanel>

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

只需要绑定按钮样式。

<Button Style="{StaticResource exampleButtonStyle}" x:Name="exampleButton" Width="100" Height="300">
</Button>

如何使用ContentPresenter的内容创建具有不同前景的按钮模板，可以通过Button的VisualState

1 个答案: