CODEWITHSUNDEEP
c#wpfstackpanel
user2048267
user2048267

Reputation:

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!

Upvotes: 1

Views: 440

Answers (3)

Jai
Jai

Reputation: 8363

I would recommend not using StackPanel; use Grid instead:

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

The two TextBlocks will overlapped on the same column in the Grid. This is to allow the button to accomodate both "Connect" and "Disconnect" texts without changing its size.

Of course, you need to implement the converter. One thing to note is that you must use "Hidden" Visibility so that the size calculation takes the hidden TextBlock into account.

Upvotes: 0

Pratik Parikh
Pratik Parikh

Reputation: 158

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"

Upvotes: 1

SilentCoder
SilentCoder

Reputation: 2000

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

Try this solution, It will change the width of the button according to your inside content size. Keep in mind that I added a minimum width there too. So you can change that value according to your requirement. 

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

According to your code just change it as below, without adding above code,

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

Upvotes: 0

Related Questions