windows - 列表项中的嵌套 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>

标签： windowsxamluwpwindows-10uwp-xaml

Answer 1

您可以在 ItemContainerStyle 中将ListViewItem的Horizo ​​ntalContentAlignment 设置为Stretch。它将拉伸子元素以填充 MasterDetailsView 的分配空间。

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