Question

对于我的基于WPF的应用程序我希望有一个按钮布局，其中包含基于图像的7px粗边框，可以缩放到任何大小。

关于如何实现这一目标的基本思路（在进入所需的xaml之前）是将按钮背景切成9块：

sliced layout

4个角切片（永远不会拉伸）
4个边框切片（将水平或垂直拉伸）
1个背景切片（将水平和垂直拉伸）

我第一次尝试这样做是为了按钮的Background-property中的一个网格，但这似乎不起作用：

<Style x:Key="LoginButton" TargetType="Button">
    ...
    <Setter Property="Background">
        <Setter.Value>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="7"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="7"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="7"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="7"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Image Grid.Row="0" Grid.Column="0"  Source="/ron.launcher;component/Resources/button/buttonCornerLeftTop.png" Stretch="Fill"/>
                <Image Grid.Row="2" Grid.Column="0"  Source="/ron.launcher;component/Resources/button/buttonCornerLeftBottom.png" Stretch="Fill"/>
                <Image Grid.Row="0" Grid.Column="2"  Source="/ron.launcher;component/Resources/button/buttonCornerRightTop.png" Stretch="Fill"/>
                <Image Grid.Row="2" Grid.Column="2"  Source="/ron.launcher;component/Resources/button/buttonCornerRightBottom.png" Stretch="Fill"/>
                <Image Grid.Row="1" Grid.Column="0"  Source="/ron.launcher;component/Resources/button/buttonBorderLeft.png" Stretch="Fill"/>
                <Image Grid.Row="0" Grid.Column="1"  Source="/ron.launcher;component/Resources/button/buttonBorderTop.png" Stretch="Fill"/>
                <Image Grid.Row="1" Grid.Column="2"  Source="/ron.launcher;component/Resources/button/buttonBorderRight.png" Stretch="Fill"/>
                <Image Grid.Row="2" Grid.Column="1"  Source="/ron.launcher;component/Resources/button/buttonBorderBottom.png" Stretch="Fill"/>
                <Image Grid.Row="1" Grid.Column="1"  Source="/ron.launcher;component/Resources/button/buttonBackground.png" Stretch="Fill"/>
            </Grid>
        </Setter.Value>
    </Setter>
    ...
</Style>

还有其他方法可以达到这个目的吗？

Answer 1

使用模板属性而不是背景。试试这个

        <Style x:Key="LoginButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="7"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="7"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="7"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="7"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                     <Image Grid.Row="0" Grid.Column="0"  Source="/ron.launcher;component/Resources/button/buttonCornerLeftTop.png" Stretch="Fill"/>
                    <Image Grid.Row="2" Grid.Column="0"  Source="/ron.launcher;component/Resources/button/buttonCornerLeftBottom.png" Stretch="Fill"/>
                    <Image Grid.Row="0" Grid.Column="2"  Source="/ron.launcher;component/Resources/button/buttonCornerRightTop.png" Stretch="Fill"/>
                    <Image Grid.Row="2" Grid.Column="2"  Source="/ron.launcher;component/Resources/button/buttonCornerRightBottom.png" Stretch="Fill"/>
                    <Image Grid.Row="1" Grid.Column="0"  Source="/ron.launcher;component/Resources/button/buttonBorderLeft.png" Stretch="Fill"/>
                    <Image Grid.Row="0" Grid.Column="1"  Source="/ron.launcher;component/Resources/button/buttonBorderTop.png" Stretch="Fill"/>
                    <Image Grid.Row="1" Grid.Column="2"  Source="/ron.launcher;component/Resources/button/buttonBorderRight.png" Stretch="Fill"/>
                    <Image Grid.Row="2" Grid.Column="1"  Source="/ron.launcher;component/Resources/button/buttonBorderBottom.png" Stretch="Fill"/>
                    <Image Grid.Row="1" Grid.Column="1"  Source="/ron.launcher;component/Resources/button/buttonBackground.png" Stretch="Fill"/>
                </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

WPF：将按钮格式化为网格布局

1 个答案: