jon jon - 1 year ago 67
C# Question

StackPanel Won't Left Align

Ok, so new to WPF and have started to make a little UI for a project. I was wondering...

Why won't the button contents left align?

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


Shown as below. Notice the room on the left, I want to get rid of this if possible? I thought I could by left-aligning?

enter image description here

Once I "connect" I update the text so it looks like below (notice there isn't any extra room).

enter image description here

How can I modify my XAML code so the colored "lights" are always aligned and any extra room is at the end of the TextBlock side?

Thanks!

Answer Source

Upgrade your XAML as below:

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

You need to add only

 HorizontalContentAlignment="Left"