如何将图像右侧和左侧文本对齐？

Question

我正在尝试将布局设置为如下所示：

使用以下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>

然而，它出现在：

我需要做些什么才能使图像向右对齐，并在左侧垂直对齐文字？

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

Answer 2

父容器未伸展以填充可用空间。

你可以尝试

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

并且，如果这不起作用，请向上移动树，直到找到不拉伸的元素。

OP编辑以支持正确答案：

事实证明这是正确的 - 父容器没有伸展以填充空间。

父容器是我将项目插入的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>

Answer 3

将TextBlock的垂直对齐方式更改为中心。

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

尝试切换列定义。