CODEWITHSUNDEEP
c#xamluwpwin-universal-appuwp-xaml
CarlosTI
CarlosTI

Reputation: 133

Horizontal Center Items inside VariableSizedWrapGrid

I have a VariableSizedWrapGrid, with buttons as items:

<Page.Resources>
        <DataTemplate x:Key="LinkTemplate" x:DataType="local:LinkWeb">
            <Button Width="100" Height="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="15,15,15,15" Click="Button_Click" >
                <Button.Content>                
                    <StackPanel>
                        <Image Source="{Binding ImageLink}" Margin="8,8,8,8" HorizontalAlignment="Center" Height="{Binding HeightImage}" Width="{Binding WidthImage}"/>                        
                        <TextBlock Text="{Binding Text}" TextWrapping="WrapWholeWords" />
                    </StackPanel>
                </Button.Content>            
            </Button>
        </DataTemplate>
    </Page.Resources>

...

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Grid.Row="1">
            <ItemsControl x:Name="imageContent" ItemsSource="{Binding Enlaces}" ItemTemplate="{StaticResource LinkTemplate}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalChildrenAlignment="Stretch" MaximumRowsOrColumns="2"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>

The VariableSizedWrapGrid shows two items per row, but the items appears aligned to the left, as you can see:

enter image description here

I need the VariableSizedWrapGrid shows the items centered in his content, like this:

enter image description here

Any idea about how I can achieve this?

EDIT

I've tried center the ScrollViewer, and, yes, items are "a little more centered", because VariableSizedWrapGrid inside ScrollViewer is centered, but, inside VariableSizedWrapGrid items float to the left, so items are not centered as you can see in this picture:

enter image description here

Upvotes: 1

Views: 593

Answers (1)

Xie Steven
Xie Steven

Reputation: 8591

You could set the HorizontalChildrenAlignment property value of VariableSizedWrapGrid as Center. It should work.

<ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalChildrenAlignment="Center" MaximumRowsOrColumns="2" />
        </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

enter image description here

Upvotes: 2

Related Questions