如何使按钮内的网格在 WPF 中具有 100% 的宽度? [英] How to make a grid inside a button have 100 percent width in WPF?

问题描述

我在窗口上有一个按钮，该按钮的大小与窗口相同.我在按钮内放置了一个网格，其中包含一行和两列，并在第一列中放置了一个路径，在第二列中放置了一个文本框.

I have a button on a window that sizes to the window. I have put a grid inside the button with one row and two columns, and put a path in first column, and a textbox in the second.

我的问题是我无法使用按钮拉伸网格.

My problem is I can't get the grid to stretch with the button.

这是正在发生的事情:

这是我想要发生的事情:

Here is what I want to happen:

我有网格 Horizo​​ntalAlignment="Stretch"，但它没有拉伸.我在这里做错了什么?

I have the grids HorizontalAlignment="Stretch", yet it is not stretching. What am I doing wrong here?

代码如下:

    <Window x:Class="GridInButtonIssue.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GridInButtonIssue"
        mc:Ignorable="d"
        Title="MainWindow" Height="136.5" Width="269.839">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" >
            <Grid HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="6*" />
                    <ColumnDefinition Width="4*" />
                </Grid.ColumnDefinitions>
                <Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
                    <Canvas.RenderTransform>
                        <TranslateTransform X="0" Y="0"/>
                    </Canvas.RenderTransform>
                    <Canvas x:Name="layer1">
                        <Canvas.RenderTransform>
                            <TranslateTransform X="-298.50531" Y="-576.33075"/>
                        </Canvas.RenderTransform>
                        <Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
                    </Canvas>
                </Canvas>
                <TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
            </Grid>
        </Button>
    </Grid>
</Window>

推荐答案

你必须直接在 Button 上设置 Horizo​​ntalContentAlignment 为 Strech像这样:

You have to set the HorizontalContentAlignment to Strech on the Button directly like so:

<Window x:Class="GridInButtonIssue.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GridInButtonIssue"
        mc:Ignorable="d"
        Title="MainWindow" Height="136.5" Width="269.839">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" HorizontalContentAlignment="Stretch" >
      <Grid HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
          <RowDefinition Height="20" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="6*" />
          <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>
        <Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
          <Canvas.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
          </Canvas.RenderTransform>
          <Canvas x:Name="layer1">
            <Canvas.RenderTransform>
              <TranslateTransform X="-298.50531" Y="-576.33075"/>
            </Canvas.RenderTransform>
            <Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
          </Canvas>
        </Canvas>
        <TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
      </Grid>
    </Button>
  </Grid>
</Window> 

所以它看起来像这样:

这篇关于如何使按钮内的网格在 WPF 中具有 100% 的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！