UWP: ListView Can't align item in center

Question

I'm trying to replace my StackPanel with ListView in order to have ItemClick function available.
However, I found out that When I switched from StackPanel to ListView, the Item is not in center anymore.

Before (StackPanel):

After (ListView):

Here is the code:

<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

You need to set the HorizontalContentAlignment property for ListViewItem With the following code. then the content of ListViewItem will center.

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

After setting above style for ItemContainer keep in mind HorizontalAlignment property of each element inside ListView matters.

That is if <local:ButtonWithIcon> has set HorizontalAlignment="Center" then it will keep item in center and if it's set to Stretch then element inside ListView will try to take all available space horizontally. And if not set then element (in your case ButtonWithIcon) will stick to left side.