StackPanel 不会左对齐

Question

好的，WPF 新手，已经开始为一个项目做一点 UI。我想知道...

为什么按钮内容不左对齐？

        <ToggleButton Name="toggleButtonRobotConnect" Width="93.6" Margin="20,5,5,5" Click="toggleButtonRobotConnect_Click">
            <ToggleButton.Content>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                    <StackPanel Orientation="Horizontal">
                        <Ellipse Name="ellipseConnected" Height="10" Width="10" Stroke="Black" Fill="DarkGreen" Margin="1"></Ellipse>
                        <Ellipse Name="ellipseNotConnected" Height="10" Width="10" Stroke="Black" Fill="Red" Margin="1"></Ellipse>
                    </StackPanel>                        
                    <TextBlock Name="textBlockRobotConnect" Text="Connect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"/>
                </StackPanel>
            </ToggleButton.Content>
        </ToggleButton>

如下图。注意左边的房间，如果可能的话我想摆脱它？我以为我可以左对齐？

我 "connect" 更新文本后，它看起来像下面这样（注意没有多余的空间）。

如何修改我的 XAML 代码，使彩色 "lights" 始终对齐，并且任何额外的空间位于 TextBlock 端的末尾？

谢谢！

Answer 1

I'm providing this solution by assuming that you need to change your button size according to your content inside your button.

试试这个解决方案，它会根据您的内部内容大小更改按钮的宽度。请记住，我也在那里添加了最小宽度。所以您可以根据您的要求更改该值。

<Style TargetType="{x:Type Button}">
    <Setter Property="MinWidth" Value="20" />
    <Setter Property="HorizontalAlignment" Value="Center" />
</Style>

根据你的代码改成如下，不加上面的代码，

  <ToggleButton Name="toggleButtonRobotConnect" MinWidth="20" HorizontalAlignment="Center" Margin="20,5,5,5" Click="toggleButtonRobotConnect_Click">
            <ToggleButton.Content>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                    <StackPanel Orientation="Horizontal">
                        <Ellipse Name="ellipseConnected" Height="10" Width="10" Stroke="Black" Fill="DarkGreen" Margin="1"></Ellipse>
                        <Ellipse Name="ellipseNotConnected" Height="10" Width="10" Stroke="Black" Fill="Red" Margin="1"></Ellipse>
                    </StackPanel>
                    <TextBlock Name="textBlockRobotConnect" Text="Connect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"/>
                </StackPanel>
            </ToggleButton.Content>
  </ToggleButton>

Answer 2

升级您的 XAML 如下：

     <ToggleButton Name="toggleButtonRobotConnect" Width="93.6" Margin="20,5,5,5" HorizontalContentAlignment="Left" Click="toggleButtonRobotConnect_Click" Height="50">
        <ToggleButton.Content>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                <StackPanel Orientation="Horizontal">
                    <Ellipse Name="ellipseConnected" Height="10" Width="10" Stroke="Black" Fill="DarkGreen" Margin="1"></Ellipse>
                    <Ellipse Name="ellipseNotConnected" Height="10" Width="10" Stroke="Black" Fill="Red" Margin="1"></Ellipse>
                </StackPanel>
                <TextBlock Name="textBlockRobotConnect" Text="Connect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"/>
            </StackPanel>
        </ToggleButton.Content>
    </ToggleButton>

您只需添加

 HorizontalContentAlignment="Left"

Answer 3

我建议不要使用 StackPanel；改为使用网格：

<ToggleButton Name="toggleButtonRobotConnect" Width="93.6" Margin="20,5,5,5" Click="toggleButtonRobotConnect_Click">
    <ToggleButton.Content>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>

            <Ellipse Grid.Column="0" Name="ellipseConnected" Height="10" Width="10" Stroke="Black" Fill="DarkGreen" Margin="1"></Ellipse>
            <Ellipse Grid.Column="1" Name="ellipseNotConnected" Height="10" Width="10" Stroke="Black" Fill="Red" Margin="1"></Ellipse>

            <TextBlock Grid.Column="2" Name="textBlockRobotConnect" Text="Connect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0" Visibility="Visible" />
            <TextBlock Grid.Column="2" Name="textBlockRobotConnect" Text="Disconnect" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0" Visibility="{Binding ElementName=textBlockRobotDisconnect, Path=Visibility, Converter={StaticResource InvertedVisibilityConverter}}" />
        </Grid>
    </ToggleButton.Content>
</ToggleButton>

两个 TextBlock 将重叠在 Grid 的同一列上。这是为了允许按钮在不改变其大小的情况下容纳 "Connect" 和 "Disconnect" 文本。

当然，你需要实现转换器。需要注意的一件事是，您必须使用 "Hidden" Visibility，以便计算大小时将隐藏的 TextBlock 考虑在内。

StackPanel 不会左对齐

StackPanel Won't Left Align

c#

wpf

stackpanel