Блог

Главная - Вопросы по программированию - Как выровнять изображения по правому краю и текст по левому краю?

Как выровнять изображения по правому краю и текст по левому краю?

#xaml #windows-phone-7 #windows-phone-8

#xaml #windows-phone-7 #windows-phone-8

Вопрос:

Я пытаюсь настроить свой макет так, чтобы он отображался следующим образом:

введите описание изображения здесь

Используя следующий 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>

Однако это отображается как:

введите описание изображения здесь

Что мне нужно сделать, чтобы изображения выровнялись по правому краю, а текст выровнялся по вертикали слева?

Комментарии:

1. Это должно работать нормально (за вычетом избыточных зависимостей), но вы могли бы поделиться большей частью своего кода, чтобы показать родительские контейнеры, которые, я могу только предположить, влияют на них как на дочерние.

Ответ №1:

Попробуйте это

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

Ответ №2:

Родительский контейнер не растягивается, чтобы заполнить доступное пространство.

Вы можете попробовать

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

и, если это не сработает, двигайтесь вверх по дереву, пока не найдете элемент, который не растягивается.

OP Edit в поддержку правильного ответа:

Оказывается, это правильно — родительский контейнер не растягивался, чтобы заполнить пространство.

Родительским контейнером был ListBox, в который я вставлял элементы.

Где раньше у меня было только это:

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

Я изменил его на следующее, чтобы заставить растягиваться содержащие элементы ListBoxItems:

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

Ответ №3:

Измените вертикальное выравнивание текстового блока на выравнивание по центру.

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

И попробуйте переключить определения столбцов.