WPF:如何在样式和ControlTemplate之间传递Content属性 [英] WPF: How to pass Content property between styles and ControlTemplate

查看:260
本文介绍了WPF:如何在样式和ControlTemplate之间传递Content属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试根据属性在WPF中的两种样式之间进行切换。
要在样式之间进行切换,我为每种样式使用了ControlTemplate,并使用了一种在ControlTemplates之间进行切换的触发器。
我的问题是我在每个基本样式中都有一个ContentPresenter,不能从外部(从用法)进行设置。

I'm trying to switch between two styles in WPF according to a property. To switch between the styles I used ControlTemplate for each style and one style with triggers that switching between the ControlTemplates. My problem is that I have a ContentPresenter inside each basic style and I cannot set it from outside (from the usages).

这是我在xaml中的代码:

This is my code in 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

谢谢!

Anna。

推荐答案

我找到了一个解决方案:
我将样式更改为ControlTemplate,并创建了一个基本样式,该样式将是主要样式的BasedOn样式,

I found a solution for this: I changed the styles to ControlTemplate and created a basic style that will be the BasedOn style of the main style with the triggers.

新代码是:

<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属性而改变:

And now the content of the button changing according to the Content property in:

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

这篇关于WPF:如何在样式和ControlTemplate之间传递Content属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆