UWP：ListView 无法将项目居中对齐

Question

我正在尝试用 ListView 替换我的 StackPanel，以便使用 ItemClick 功能。
但是，我发现当我从 StackPanel 切换到 ListView 时，Item 不再居中了。

之前（堆栈面板）：

在（列表视图）之后：

代码如下：

<SplitView.Pane>
                <Grid Background="{ThemeResource SideBackground}">
                    <Border BorderBrush="#E8E8E8" BorderThickness="0,0,1,0"/>
                    <Image x:Name="StoreLogo" Width="32" Height="32"></Image>
                    <ListView>
                        <localui:ButtonWithIcon
                                IconContent="&#xE1D3;"
                                Content="书架"
                                Style="{StaticResource TransparentFontButtonStyle}"/>
                        <localui:ButtonWithIcon
                                IconContent="&#xEC27;" 
                                Content="搜索"
                                Style="{StaticResource TransparentFontButtonStyle}"/>
                        <localui:ButtonWithIcon 
                                IconContent="&#xE713;"
                                Content="设置"
                                Style="{StaticResource TransparentFontButtonStyle}"/>
                    </ListView>
                        <localui:ButtonWithIcon
                                IconContent="&#xE13D;"
                                Content="请登录"
                                VerticalAlignment="Bottom"
                                Margin="0,0,0,30"
                                Style="{StaticResource RoundFontButtonStyle}"/>
                </Grid>
            </SplitView.Pane>

<Style x:Key="TransparentFontButtonStyle" TargetType="localui:ButtonWithIcon">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontSize" Value="30"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0,30,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="localui:ButtonWithIcon">
                    <StackPanel>
                        <TextBlock
                            x:Name="Icon"
                            Text="{Binding IconContent, RelativeSource={RelativeSource TemplatedParent}}"
                            HorizontalAlignment="Center"
                            FontFamily="{StaticResource SymbolThemeFontFamily}"
                            FontSize="30"/>
                        <TextBlock
                            x:Name="Text"
                            Text="{TemplateBinding Content}"
                            HorizontalAlignment="Center"
                            FontSize="14"
                            Margin="0,18,0,0"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

您需要使用以下代码为 ListViewItem 设置 HorizontalContentAlignment 属性。然后 ListViewItem 的内容将居中。

<ListView>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <local:ButtonWithIcon Content="书架" IconContent="&#xE1D3;" />
    <local:ButtonWithIcon Content="搜索" IconContent="&#xEC27;" />
    <local:ButtonWithIcon Content="设置" IconContent="&#xE713;" />
</ListView>

为 ItemContainer 设置上述样式后，请记住 ListView 中每个元素的 HorizontalAlignment 属性很重要。

也就是说，如果 <local:ButtonWithIcon> 设置了 HorizontalAlignment="Center"，那么它会将项目保持在中心，如果它设置为 Stretch，那么 ListView 中的元素将尝试占据所有水平可用 space。如果未设置，则元素（在您的情况下为 ButtonWithIcon）将固定在左侧。

UWP：ListView 无法将项目居中对齐

UWP: ListView Can't align item in center

listview

stackpanel

uwp

uwp-xaml