在按钮

Question

我正在构建一个垂直按钮栏。每个按钮上都有一个图像和一个TextBlock。所有按钮将根据字体大小和TextBlock中的字符数在宽度和高度上缩放。期望具有最少字符数的TextBlock被拉伸以占据剩余空间并且尽可能地向左推动图像。问题似乎是无法拉伸TextBlock（具有较少字符的TextBlock）来填充按钮栏上的剩余空间。我怎么能这样做？

    <ScrollViewer>
    <Grid>
        <Grid.Background>
            <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightColorKey}}"/>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Button 
            HorizontalAlignment="Stretch"
            Grid.Row="0"
            Grid.Column="1" 
            Margin="2"
            Height="{Binding ActualHeight, ElementName=Tb}"
            Click="Button1_Click">
            <!---->
            <DockPanel>
                <Image 
                    Source="/images/block_arrow_left.png"
                    Grid.Row="0" 
                    Grid.Column="0"
                    Height="{Binding ActualHeight, ElementName=Tb}" Margin="0" VerticalAlignment="Center">
                </Image>
                <TextBlock 
                    x:Name="Tb"
                    Padding="5"
                    VerticalAlignment="Center"
                    Grid.Row="0" 
                    Grid.Column="1" 
                    FontSize="14"
                    Text="button1">
                </TextBlock>
            </DockPanel>
        </Button>
        <Button 
            HorizontalAlignment="Stretch"
            Grid.Row="1"
            Grid.Column="1" 
            Margin="2"
            Height="{Binding ActualHeight, ElementName=Tb}"
            Click="Button2_Click">
            <DockPanel>
                <Image 
                    Source="images/block_arrow_left.png"
                    VerticalAlignment="Center"
                    Grid.Row="1" 
                    Grid.Column="0" 
                    Height="{Binding ActualHeight, ElementName=Tb}" >
                </Image>
                <TextBlock 
                    Padding="5"
                    VerticalAlignment="Center"
                    Grid.Row="1" 
                    Grid.Column="0" 
                    FontSize="14"
                    Text="button22222222222222">
                </TextBlock>
            </DockPanel>
        </Button>
    </Grid>
</ScrollViewer>             

Answer 1

您的按钮内容未占据按钮的整个内部空间。如果在DockPanels上设置Background画笔，那将是显而易见的。

要将内容拉伸到其父级，请在按钮上设置HorizontalContentAlignment="Stretch"：

<Button 
    HorizontalAlignment="Stretch"
    Margin="2"
    Height="{Binding ActualHeight, ElementName=Tb}"
    Click="Button1_Click">
    <!-- button content -->