列表项中的嵌套 UI 未正确水平对齐

Question

我试图将列表视图项内的嵌套 UI（按钮）水平对齐到右侧，但由于某些原因，这不起作用。

预期结果

当前结果

XAML

<controls:MasterDetailsView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0" Margin="0,8">
                <TextBlock Text="{Binding From}" 
                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                <TextBlock Text="{Binding Body}" 
                       Style="{ThemeResource BodyTextBlockStyle}" 
                       Opacity=".6" 
                       MaxLines="1"/>
            </StackPanel>

            <Button Grid.Column="1" 
                    Background="Transparent" 
                    Content="&#xE712;" 
                    FontFamily="Segoe MDL2 Assets"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Margin="10" 
                    Padding="10" />
        </Grid>
    </DataTemplate>
</controls:MasterDetailsView.ItemTemplate>

Answer 1

您可以在 ItemContainerStyle 中将 ListViewItem 的 HorizontalContentAlignment 设置为 Stretch。它将拉伸子元素以填充分配给 MasterDetailsView 的 space。

.xaml:

<controls:MasterDetailsView ItemsSource="{x:Bind Items,Mode=OneWay}" CompactModeThresholdWidth="720">
    <controls:MasterDetailsView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </controls:MasterDetailsView.ItemContainerStyle>

    <controls:MasterDetailsView.ItemTemplate>
        ......
    </controls:MasterDetailsView.ItemTemplate>

</controls:MasterDetailsView>

列表项中的嵌套 UI 未正确水平对齐

Nested UI in list items not horizontally aligning correctly

windows

xaml

windows-10

uwp

uwp-xaml