Question

我在窗口内创建了一个按钮。为了更容易使用，我想将按钮转换为样式。

窗口文件中的按钮

<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样式的新手，所以感谢任何帮助：）

Answer 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>

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

WPF - 将按钮转换为样式

1 个答案: