WPF：如何在样式和 ControlTemplate 之间传递 Content 属性答案

【问题标题】：WPF: How to pass Content property between styles and ControlTemplateWPF：如何在样式和 ControlTemplate 之间传递 Content 属性
【发布时间】：2015-12-09 15:06:35
【问题描述】：

我正在尝试根据属性在 WPF 中的两种样式之间切换。为了在样式之间切换，我对每种样式都使用了 ControlTemplate，而一种样式带有在 ControlTemplate 之间切换的触发器。我的问题是我在每个基本样式中都有一个 ContentPresenter，我无法从外部（从用法）设置它。

这是我在 xaml 中的代码：

    <Style x:Key="SecondaryButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Foreground" Value="#FF494F5A"/>
    <Setter Property="FontSize" Value="24.5" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="MinHeight" Value="76" />
    <Setter Property="Padding" Value="10,0,10,0"/>
    <Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" CornerRadius="5,5,5,5"
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                    <Grid>                        
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                                                  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>                        
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
                    </Trigger>

                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
                    </Trigger>


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

<Style x:Key="SecondaryButtonWithArrowStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Foreground" Value="#FF494F5A"/>
    <Setter Property="FontSize" Value="24.5" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="MinHeight" Value="76" />
    <Setter Property="Padding" Value="20,0"/>
    <Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5"
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4">
                            <Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478" 
                                    Fill="#FF646A74" x:Name="Path"/>
                            <Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z" 
                                    Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Grid>
                        <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                                                  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>                        
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
                    </Trigger>

                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ControlTemplate x:Key="NormalButton">
    <Button Style="{StaticResource SecondaryButtonStyle}"  />
</ControlTemplate>

<ControlTemplate x:Key="ArrowButton">
    <Button Style="{StaticResource SecondaryButtonWithArrowStyle}" />
</ControlTemplate>


<Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="False">
            <Setter Property="Template" Value="{StaticResource NormalButton}" />
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Template" Value="{StaticResource ArrowButton}" />
        </Trigger>
    </Style.Triggers>
</Style>

用法是：

<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" />

如何让按钮获取Content="Back"？

谢谢！

安娜。

【问题讨论】：

所以既然你有单独的样式，而且我假设你的条件在某些时候是一个布尔值，为什么不只是换掉带有可见性和转换器的单独按钮而不是所有这些样式的交换同一个对象？在性能方面，它会更有意义。
感谢您的回答，但我们考虑了这一点并得出了一个关于未来的结论，如果我们需要 5 种具有枚举属性而不是 bool 的不同样式 - 触发器使其更多易于使用，无需转换器。

标签： wpf xaml data-binding wpf-controls

【解决方案1】：

我找到了解决方案：我将样式更改为 ControlTemplate 并创建了一个基本样式，它将是带有触发器的主样式的 BasedOn 样式。

新代码是：

<Style x:Key="BaseButtonWithArrowStyle" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Foreground" Value="#FF494F5A"/>
            <Setter Property="FontSize" Value="24.5" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="MinHeight" Value="76" />
            <Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
        </Style>


        <ControlTemplate x:Key="NormalButton" TargetType="Button">
            <Border Background="{TemplateBinding Background}" CornerRadius="5"
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,0,0,0">
                        <Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478" 
                                    Fill="#FF646A74" x:Name="Path"/>
                        <Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z" 
                                    Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>
                    <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                                                  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
                </Trigger>

                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
                </Trigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>


        <ControlTemplate x:Key="ArrowButton" TargetType="Button">
            <Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5"
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4">
                        <Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478" 
                                    Fill="#FF646A74" x:Name="Path"/>
                        <Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z" 
                                    Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>
                    <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                                                  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Viewbox Width="55" Height="55" Grid.Column="2">
                        <Grid HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,4,4,4" RenderTransformOrigin="0.5,0.5">
                            <Path Data="F1M53.214,40.132C54.801,36.559 55.708,32.607 55.708,28.435 55.708,12.757 43.212,0 27.854,0 12.495,0 0,12.757 0,28.435 0,44.116 12.495,56.873 27.854,56.873 32.587,56.873 37.042,55.653 40.95,53.521" 
                                          Fill="White"/>
                            <Path Data="F1M46.556,38.537L45.676,39.265 45.723,46.108 28.875,46.108 28.875,44.318 28.221,44.594 28.221,42.656 46.556,35.641z M27.854,0C23.121,0,18.666,1.221,14.759,3.353L24.395,25.827C33.549,28.967 39.062,26.315 40.16,25.926 41.325,25.514 42.419,25.702 43.139,25.904 44.271,26.215 46.152,28.391 45.442,29.216 41.664,33.584 30.583,38.32 28.825,38.204 27.066,38.092 23.007,38.156 23.007,38.156L22.645,39.563 14.373,41.318C14.373,41.318 13.041,38.472 12.885,37.841 12.728,37.209 13.26,36.858 13.26,36.858 12.355,36.334 11.869,33.725 11.626,31.787L9.378,32.791 2.494,16.743C0.906,20.314 0,24.267 0,28.439 0,44.117 12.496,56.873 27.854,56.873 43.213,56.873 55.708,44.117 55.708,28.439 55.708,12.759 43.213,0 27.854,0" 
                                          Fill="#FFFF8241" RenderTransformOrigin="0.5,0.5" >
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="1" ScaleX="-1"/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>
                        </Grid>
                    </Viewbox>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
                </Trigger>

                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
                </Trigger>


            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonWithArrowStyle}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Template" Value="{StaticResource NormalButton}" />
                    <Setter Property="Padding" Value="42,0,70,0"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Template" Value="{StaticResource ArrowButton}" />
                    <Setter Property="Padding" Value="20,0"/>
                </Trigger>
            </Style.Triggers>
        </Style>

现在按钮的内容根据 Content 属性改变：

<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" />

【讨论】：