Left-align items in a gridview

Question

I can't seem to figure out how to left-align content of my GridView. Any suggestions?

<GridView ItemsSource="{Binding HostedRooms}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Vertical" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    <GridView.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="AliceBlue" BorderThickness="0">
                <StackPanel Orientation="Horizontal">
                    <StackPanel Margin="0, 20">
                        <TextBlock Text="{Binding RoomTitle}" TextAlignment="Left" />
                        <TextBlock>
                            <Run Text="Host: " />
                            <Run Text="{Binding Host}" />
                        </TextBlock>
                        <TextBlock>
                            <Run Text="Map: " />
                            <Run Text="{Binding Map}" />
                        </TextBlock>
                        <TextBlock>
                            <Run Text="Slots: " />
                            <Run Text="{Binding ClaimedSlots}" />
                            <Run Text="/" />
                            <Run Text="{Binding TotalSlots}" />
                            <Run Text="Players (" />
                            <Run Text="{Binding NonObservers}" />
                            <Run Text=") " />
                            <Run Text="Observers (" />
                            <Run Text="{Binding Observers}" />
                            <Run Text=") " />
                        </TextBlock>
                    </StackPanel>
                    <GridView ItemsSource="{Binding Players}">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid Orientation="Vertical" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </StackPanel>
            </Border>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

And below is the result that's produced by the code. For whatever reason only the first item is left-aligned, with the remaining ones being centered.

Answer 1

Why you are using a GridView instead of ListView if you have just one Column ? This happens because your DataTemplate doesn't have a static width. So first GridViewItem has width equal all page width (from your screen), then other have lower grid and have aligment to center.

I suggest to use a ListView and use a ItemContainerStyle :

 <Style TargetType="ListViewItem" x:Key="CustomCartItemsListview">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Padding" Value="12,0,12,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter
          ContentTransitions="{TemplateBinding ContentTransitions}"
          SelectionCheckMarkVisualEnabled="True"
          CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          DragBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
          FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
          FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
          PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
          PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
          SelectedPressedBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
          DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
          ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
          ContentMargin="{TemplateBinding Padding}"
          CheckMode="Inline"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Then you need to use it like this :

 <ListView ItemContainerStyle="{StaticResource CustomCartItemsListview}">
  </ListView>