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>

如下所示。注意左边的房间，我想尽可能摆脱这个？我以为我可以通过左对齐？

一旦我“连接”，我就会更新文字，使其看起来如下（注意没有任何额外的空间）。

如何修改我的XAML代码，使彩色“灯光”始终对齐，任何额外的空间都在TextBlock一端？

谢谢！

Answer 1

升级您的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 2

我提供此解决方案时假设您需要根据按钮内的内容更改按钮大小。

尝试此解决方案，它会根据您的内容大小更改按钮的宽度。请记住，我也添加了最小宽度。因此，您可以根据您的要求更改该值。

<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 3

我建议不要使用StackPanel;改为使用Grid：

<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中的同一列上。这是为了使按钮能够容纳“连接”和“断开”文本而不改变其大小。

当然，您需要实现转换器。需要注意的一点是，必须使用“隐藏”可见性，以便大小计算将隐藏的TextBlock考虑在内。

StackPanel不会左对齐

3 个答案: