We Keep Coding

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:
I need the VariableSizedWrapGrid shows the items centered in his content, like this:
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:

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>

WPF Horizontal Listbox fill vertically

I'm making a list of products that display within a listbox that scrolls horizontally. I have the list scrolling horizontally however I only ever get 1 row of items even though the list box is high enough to populate 2 rows before it starts scrolling horizontally.
Part of my WPF code.
<DataTemplate x:Key="productTemplate">
<WrapPanel Orientation="Horizontal" Width="10" Height="10">
<Image Source="{Binding Photo}" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" Width="288" Height="320"/>
<Label Content="{Binding Name}" />
<Label Content="{Binding Cost}" />
</WrapPanel>
</DataTemplate>
<ListBox Width="1334" ItemsSource="{Binding Products}" SelectedItem="{Binding SelectedProduct}" ItemTemplate="{DynamicResource productTemplate}" Height="865" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="0">
<ListBox.Background>
<SolidColorBrush Color="White" Opacity="0.85"/>
</ListBox.Background>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
I'm looking for:
Any help would be great.

The WrapPanel that is used as ItemsPanel must have vertical orientation, and the ListBox must not scroll vertically:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ...>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
...
</ListBox>

Maybe the following code will help you. The following code will help you to bind images in the following manner.
<ListBox Grid.Column="1" ItemsSource="{Binding Items}" Name="detailList" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="90">
<Image Width="80" Source="{Binding Type,
Converter={x:Static local:HeaderToImageConverter.Instance}}"/>
<TextBlock FontSize="11" Text="{Binding Name}" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Trying To Make A Listbox Horizontal Inside a Grid [duplicate]

This question already has answers here:
I need Horizontal view of list boxes
(5 answers)
Closed 9 years ago.
I have a grid of size 400 x 150 in which I would like to add a Listbox.
The Listbox is composed of a grid that contains a TextBlock.
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<Border BorderBrush="Black" HorizontalAlignment="Right" />
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
But the list is displayed vertically.
I tried to use a VirtualizingStackPanel but the problem is that the borders of the grids don't appear correctly.
How can I make this list look horizontal, with the borders of the grid that contains the textblock visible?

U can use like this to have horizontal scrollViewer of Listbox
<Grid Width="400" Height="150">
<ListBox x:Name="list" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<Border BorderBrush="Black" HorizontalAlignment="Right" />
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
In addition to this You have to adjust height and width of both listbox and grid according to your requirement.

If I am correct, you don't want a StackPanel inside the DataTemplate, you actually want a horizontally laid out items inside the ListBox. You need to change the ListBox.ItemsPanel and you need to disable vertical scroll and enable horizontal scroll in the ListBox. Here is the full XAML:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"
CanVerticallyScroll="False"
CanHorizontallyScroll="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

I think you can use ItemsPanel to change the oriention of listBox. and the borderThickness is also necessary.Hope I can help you. Thx!
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<!-- if you want to use border to separate items, HorizontalAlignment="Right";
and if use it as container, HorizontalAlignment="Stretch" -->
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right"/>
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>

I think Chris is on the right lines, but I am sure you need a content presenter in the ItemsPanel template.
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<!-- if you want to use border to separate items, HorizontalAlignment="Right";
and if use it as container, HorizontalAlignment="Stretch" -->
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right">
<TextBlock Foreground="Black" Text="{Binding name}" />
</Border>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter/>
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

Use this code it could help you:
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width = "80">
<Border BorderBrush="Black" HorizontalAlignment="Right" />
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

Use ItemsPanel property of listbox. try this its work for me.
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<Border BorderBrush="Black" HorizontalAlignment="Right" />
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

How to load all items in listbox instead of just the visual ones

How do I load all the items in listbox instead of just the ones showing? Basically, how do you turn off the virtualizing of a Listbox? I tried but nothing worked.
<ListBox x:Name="listBox1" VirtualizingStackPanel.IsVirtualizing="True" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Background="Black" BorderThickness="0" IsEnabled="False" ForceCursor="True">
<ListBox.RenderTransform>
<TranslateTransform x:Name="listBoxTransform" />
</ListBox.RenderTransform>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel x:Name="wp" IsItemsHost="True" ItemHeight="244" ItemWidth="184" Width="1700">
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type Image}" x:Name="dtName">
<!-- The Image binding -->
<Image Width="170" Height="230" Source="{Binding}" Stretch="Fill" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>

Use this code (modified from yours)
<ListBox x:Name="listBox1" VirtualizingStackPanel.IsVirtualizing="False"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="False"
Background="Black" BorderThickness="0" IsEnabled="False"
ForceCursor="True">
<ListBox.RenderTransform>
<TranslateTransform x:Name="listBoxTransform" />
</ListBox.RenderTransform>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel x:Name="wp" IsItemsHost="True" ItemHeight="244" ItemWidth="184" Width="1700">
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type Image}" x:Name="dtName">
<!-- The Image binding -->
<Image Width="170" Height="230" Source="{Binding}" Stretch="Fill" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
I changed the VirtualizingStackPanel.IsVirtualizing to False (as suggested in a previous answer) and I added the ScrollViewer.CanContentScroll="False", which negates the virtualization and also allows for a smooth scrolling if the items inside the ListBox are too big (instead of jumping from item to item, it goes by small steps).
Hope this solves your issue, regards.

<ListBox VirtualizingStackPanel.IsVirtualizing="False"
ItemsSource="{Binding XPath=Team}"
ItemTemplate="{DynamicResource NameDataStyle}"/>

You'd have to override the ItemsPanel (specifically, providing a new ItemsPanelTemplate), as that is where the VirtualizingStackPanel is specified/used.
Something like this:
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

adding dynamic buttons wpf in a wrappanel

I am trying to display buttons dynamically on the screen in a wrap panel so that they are laid our nicely without any scrollbars. I have the markup as below, but the scrollbars appear for some reason. how do we make the scrollbar not appear and the buttons laid out without any scrollbars.
<ListBox x:Name="ItemsListBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<ToggleButton Content="{Binding Name}" Click="Click" MinWidth="120" MinHeight="70" FontWeight="Bold" FontSize="18"/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

What control is your ListBox inside? Most often the problem you descrive is caused by the parent control allowing the ListBox to grow.
You can prove whether this is the problem by setting an explicit Width="200" on your ListBox and testing what happens. If it wraps, then the problem is the ListBox's parent.

Add
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
to you containers.

This does it what I was trying to achieve.
<ItemsControl x:Name="ListBox" Grid.Row="5" Grid.ColumnSpan="2">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton Content="{Binding Name}" MinWidth="120" MinHeight="50" FontWeight="Bold" FontSize="16" Margin="5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>