Develop Reference

How to Remove Spacing between ItemsControl Items

I have an ItemsControl with materialDesign Chips as a DataTemplate. My goal is to place the items one after the other without a lot of space in between.
There is a pic what is now looks like: https://imgur.com/hicWnGg.png
And this is my Goal: https://imgur.com/0jIEk8k.png
I tried already the ItemContainerStyle with Margin but this didnt helped me out
My Current Code
<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<ItemsControl x:Name="myItemsControl" Height="40" Margin="0 10 0 0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<materialDesign:Chip Tag="{Binding Name}" Uid="{Binding SourceName}" Content="{Binding Code}" Width="75" IsDeletable="True" DeleteClick="Chip_DeleteClick"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>

Change your ItemsPanelTemplate to StackPanel instead of UniformGrid
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

GridView Groups should not start in a new column

I've created a new GridView that groups the item by key.
<GridView
Style="{StaticResource DefaultGridViewStyle}"
ItemsSource="{Binding Source={StaticResource TimeGroupCollectionViewSource}}"
ItemTemplate="{StaticResource TransactionDataTemplate}"
MaxHeight="{Binding MaximumContentHeight}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" GroupHeaderPlacement="Left"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Background="{ThemeResource B2}" Height="40" VerticalAlignment="Top" Tapped="Border_Tapped">
<TextBlock Style="{StaticResource GroupTextBlockStyle}" Height="40" VerticalAlignment="Top" Text="{Binding Key}" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<Page.Resources>
<CollectionViewSource x:Name="TimeGroupCollectionViewSource" IsSourceGrouped="True" Source="{Binding TransactionList}" ItemsPath="Data"/>
</Page.Resources>
That works fine. By default every group starts in a new column.
What I want is something like this:
How can I achieve that? Do I miss some properties?

If you want your grid to scroll vertically - you should try changing its ScrollViewer.HorizontalScrollMode and ScrollViewer.VerticalScrollMode or use a ListView with custom ItemsPanel.

Bind to item in collection, code behind

I want to bind to a specific item of my itemsControl (named maskDataBinding). I tried this:
<VisualBrush Visual="{Binding ElementName=maskDataBinding,Path=[0]}"/>
but it doesnt work. Also, could I bind the index as well? I have a slider and would like to update the item it is binded to when I adjust the slider.
Something like this:
<VisualBrush Visual="{Binding ElementName=maskDataBinding,Path=[{Binding ElementName=ScaleXSlider, Path=Value]}"/>
Edit:
Here is maskDataBinding simplified
<!--Outer collection-->
<ItemsControl Name="maskDataBinding">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Transparent"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--nested collection-->
<ItemsControl Background="Transparent" ItemsSource="{Binding ImageSource}>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Transparent"</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Name}"</Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Handle number of rows in GridView

I have a need to create a GridView, that will have only 1 row and many columns.
Because i want to realize SemanticZoom and Scroll into view.
GridView is populated by CustomUserControls here is my code:
<SemanticZoom IsZoomOutButtonEnabled="False">
<SemanticZoom.ZoomedInView>
<GridView x:Name="ZoomedInView" VerticalAlignment="Center" SelectionMode="None" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ItemContainerStyle="{StaticResource GridViewItemStyle}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid MaximumRowsOrColumns="1" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
<Controls:FirstControl VerticalAlignment="Stretch" />
<Controls:SecondControl VerticalAlignment="Stretch" />
<Controls:ThirdControl VerticalAlignment="Stretch" />
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView SelectionMode="None" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
The controls Width will be handled by its children, but height must be full size of GridView, how to achieve this?

Replaced the
ItemsPanel to:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Worked like a charm

Alignment of nested databinding with ItemsControl in C# WPF

I have the following datatemplate:
<ItemsControl x:Name="Groups" ItemsSource="{Binding Groups}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="GroupStackPanel" Orientation="Horizontal">
<GroupBox Header="{Binding Path=GroupName}">
<ItemsControl ItemsSource="{Binding Buttons}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="BtnStackPanel" Orientation="Horizontal">
<Button Content="{Binding Path=LabelString}"
Command="{Binding Path=ButtonCommand}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</GroupBox>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This includes some ButtonGroups and Buttons which are in this Group.
The class Group includes a string-property "GroupName" and an ObservableCollection-property "Buttons". The allocation of buttons and groups is working correctly.
So here is my problem: I want to have this buttongroups in a ribbontab in the dockpanel. But the alignment or the orientation is false, so the buttons are one below the other and not next to each other.
Has anyone an idea what is wrong in my code?

At the moment, you're using a Stackpanel with horizontal orientation, which is the right idea, but the Stackpanel is in the wrong place (the ItemTemplate). The ItemTemplate is applied to every item in an ItemsControl, which means that your XAML represents a collection of buttons where each is surrounded by its very own StackPanel.
To have the desired effect, you instead need to specify the Stackpanel as the ItemsPanelTemplate of the ItemsControl.
Try changing your inner clause to:
<ItemsControl ItemsSource="{Binding Buttons}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Path=LabelString}" Command="{Binding Path=ButtonCommand}"/>
</DataTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="BtnStackPanel" Orientation="Horizontal">
</ItemsPanelTemplate>
<ItemsControl.ItemsPanel>
</ItemsControl>
Edit
If you want both groups and buttons to display horizontally, you can do the same thing to both:
<ItemsControl x:Name="Groups" ItemsSource="{Binding Groups}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<GroupBox Header="{Binding Path=GroupName}">
<ItemsControl ItemsSource="{Binding Buttons}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Path=LabelString}" Command="{Binding Path=ButtonCommand}"/>
</DataTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="BtnStackPanel" Orientation="Horizontal"/>
</ItemsPanelTemplate>
<ItemsControl.ItemsPanel>
</ItemsControl>
</GroupBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="GroupStackPanel" Orientation="Horizontal"/>
</ItemsPanelTemplate>
<ItemsControl.ItemsPanel>
</ItemsControl>