Question

按钮上有三个textBlocks。希望将列0和2的textBlock分别锚定在按钮的左边缘和右边缘，而列1的文本块占用多余的空间。如何实现这一目标？

<Grid Width="150" Height="50">
    <Button 
            Style="{StaticResource GrayStyleButton}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock 
                    Grid.Column="0"
                    FontSize="12"
                    Text="+">
            </TextBlock>
            <TextBlock 
                    Grid.Column="1"
                    FontSize="12"
                    Text="Page1_b2">
            </TextBlock>
            <TextBlock 
                    Grid.Column="2"
                    FontSize="12"
                    Text="+">
            </TextBlock>
        </Grid>
    </Button>
</Grid>

Answer 1

为按钮和Grid

提供HorizontalAlignment =“Stretch”

<Button HorizontalContentAlignment="Stretch">
                <Grid Width="{Binding}" HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0"
                               FontSize="12"
                               Text="+" />
                    <TextBlock Grid.Column="1" 
                               FontSize="12"
                               Text="Page1_b2" />
                    <TextBlock Grid.Column="2"
                               FontSize="12"
                               Text="+" />
                </Grid>
            </Button>

Answer 2

<Grid Width="150" Height="50">
    <Button Style="{StaticResource GrayStyleButton}">
        <StackPanel Orientation="Horizontal">

            <Image Style="{StaticResource BlockArrowLeftWhite}"
                   Height="{StaticResource fontSize}" HorizontalAlignment="Left">
            </Image>

            <TextBlock FontSize="{StaticResource fontSize}" Text="Page1_b2" HorizontalAlignment="Center"/>

            <Image Style="{StaticResource BlockArrowLeft}" Height="{StaticResource fontSize}" HorizontalAlignment="Right">
            </Image>

        </StackPanel>
    </Button>
</Grid>

我希望您在静态样式资源中使用了适当的边距值和其他缩进属性。

左右对齐网格元素并在按钮WPF

2 个答案: