CODEWITHSUNDEEP
xamlwindows-phone-7windows-phone-8
DaveDev
DaveDev

Reputation: 42175

How to align images to the right and text to the left?

I'm trying to set my layout to appear as follows:

enter image description here

Using the following XAML:

<Grid >
    <Grid.ColumnDefinitions>            
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <TextBlock Name="txtSiteName" VerticalAlignment="Top" Width="auto"/>

    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Right">
        <tabs:TabItem Name="tabSettings" TabItemText="Settings" 
                  TabItemImage="settings.png" Margin="5" />

        <tabs:TabItem Name="tabDelete" TabItemText="Delete Site" 
                  TabItemImage="delete.png" Margin="5" />
    </StackPanel>

</Grid>

However, it's appearing as:

enter image description here

What do I need to do to get the images to align to the right, and have the text vertically aligned on the left?

Upvotes: 1

Views: 1326

Answers (3)

user1228
user1228

Reputation:

A parent container isn't stretching to fill the available space.

You can try

<Grid HorizontalAlignment="Stretch" >
<!-- etc -->

and, if that doesn't work, move up the tree until you find the element that's not stretching.

OP Edit in support of the correct answer:

It turns out this is correct - A parent container wasn't stretching to fill the space.

The parent container was the ListBox that I was inserting the items into.

Where before I had just this:

    <ListBox Name="SiteListBox" Grid.Row="2" />

I changed it to the following to force the containing ListBoxItems to stretch:

    <ListBox Name="SiteListBox" Grid.Row="2">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

Upvotes: 0

Kasun Kodagoda
Kasun Kodagoda

Reputation: 4024

Try This

<Grid >
    <Grid.ColumnDefinitions>            
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <TextBlock Name="txtSiteName" VerticalAlignment="Top" Width="auto"/>

    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Column="2" HorizontalAlignment="Right">
        <tabs:TabItem Name="tabSettings" TabItemText="Settings" 
              TabItemImage="settings.png" Margin="5" />

        <tabs:TabItem Name="tabDelete" TabItemText="Delete Site" 
              TabItemImage="delete.png" Margin="5" />
    </StackPanel>
</Grid>

Upvotes: 2

user3752670
user3752670

Reputation:

Change the TextBlock's Vertical Alignment to Center.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Name="txtSiteName" VerticalAlignment="Center"/>
    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Right">
        <tabs:TabItem Name="tabSettings" TabItemText="Settings" 
              TabItemImage="settings.png" Margin="5" />

        <tabs:TabItem Name="tabDelete" TabItemText="Delete Site" 
              TabItemImage="delete.png" Margin="5" />
    </StackPanel>
</Grid>

And try switching your column definitions.

Upvotes: 0

Related Questions