好的,这是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一端?
谢谢!
答案 0 :(得分: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"
答案 1 :(得分:0)
我提供此解决方案时假设您需要根据按钮内的内容更改按钮大小。
尝试此解决方案,它会根据您的内容大小更改按钮的宽度。请记住,我也添加了最小宽度。因此,您可以根据您的要求更改该值。
<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>
答案 2 :(得分:0)
我建议不要使用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考虑在内。