WPF - 将按钮转换为样式答案

【问题标题】：WPF - Convert button to styleWPF - 将按钮转换为样式
【发布时间】：2017-03-08 04:34:35
【问题描述】：

我在窗口内创建了一个按钮。为了方便使用，我想把按钮转换成样式。

窗口文件中的按钮

<Button x:Name="btn_CustomButton" 
                            HorizontalAlignment="Stretch" 
                            VerticalAlignment="Top"  
                            Padding="0,10,0,7" 
                            HorizontalContentAlignment="Stretch" 
                            BorderBrush="{x:Null}" 
                            Background="#FF2E2E2E" 
                            Margin="0,0,0,1">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="3*"/>
                            </Grid.ColumnDefinitions>

                            <Image Grid.Column="0" Source="UIExplorer_64x.png" Margin="10,0,0,0" Stretch="UniformToFill" />
                            <Label Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,2" FontSize="18" Foreground="#FFD6D6D6" Padding="0" >btn_CustomButton</Label>
                        </Grid>
                    </Button>

我尝试过的风格：

<Style x:Key="NavigationButton" TargetType="{x:Type Button}">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="#FF2E2E2E" />
    <Setter Property="Padding" Value="0,10,0,7"/>
    <Setter Property="Margin" Value="0,0,0,1"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Width="{TemplateBinding Width}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>

                        <Image Grid.Column="0" Source="UIExplorer_64x.png" Margin="10,0,0,0" Stretch="UniformToFill" />
                        <Label Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,2" FontSize="18" Foreground="#FFD6D6D6" Padding="0" >btn_CustomButton</Label>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

问题是，样式似乎忽略了一些属性，例如背景颜色和填充。

它应该是什么样子：

它的样子：

很难看出区别，但样式实际上忽略了背景颜色。

另外，如何将图像路径发送到按钮以便我可以使用

<button Style="{StaticResource NavigationButton}" 
    Content="Text" 
    ImageSource="someImage.png" />

由于我是学习 wpf 样式的新手，感谢任何帮助 :)

【问题讨论】：

控件模板中的某些内容必须使用背景色，但您的控件模板会忽略它。尝试改用 ContentTemplate；这将使基本按钮控件模板的内容保持不变，就像您原来的那样。
Creating an image+text button with a control template?的可能重复
我会删除 <Setter Property="OverridesDefaultStyle" Value="True"/>，因为这就是您的内联样式的工作方式。

标签： c# wpf templates button styles

【解决方案1】：

您不需要在样式中设置OverridesDefaultStyle，因为设置ControlTemplate 就是这样做的。这就是重点。

<Style x:Key="NavigationButton" TargetType="{x:Type Button}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="#FF2E2E2E" />
    <Setter Property="Padding" Value="0,10,0,7"/>
    <Setter Property="Margin" Value="0,0,0,1"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Padding="{TempalteBinding Padding}"
                        Margin="{TemplateBinding Margin}">
                    <Grid Width="{TemplateBinding Width}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>

                        <Image Grid.Column="0" 
                               Source="UIExplorer_64x.png"
                               Margin="10,0,0,0"
                               Stretch="UniformToFill" />
                        <Label Grid.Column="1" 
                               HorizontalAlignment="Left" 
                               VerticalAlignment="Center" 
                               Margin="10,0,0,2" 
                               FontSize="18" 
                               Foreground="#FFD6D6D6" 
                               Padding="0">
                            btn_CustomButton
                        </Label>
                    </Grid> 
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这应该让您更接近您正在寻找的东西。您正在为控件定义模板，在本例中为按钮。这意味着您将丢弃所有属性设置并自己设置它们。你从一张白纸开始，这就是为什么你会丢失所有其他默认的东西。因此，如果您想这样做，您必须愿意添加您想要的视觉样式——您希望用户看到的每一个属性。

【讨论】：