How to align auto generated content DataTemplate next to each other? - c#

i want those buttons next to each other and not under each other
this is a mvvm, so the buttons are generated by a class
<ItemsControl ItemsSource="{Binding Pages}" Grid.Column="1">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button Margin="8" Content="{Binding Name}" Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" CommandParameter="{Binding}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

You just have to change the default ItemsPanel from your ItemsControl into a horizontal oriented one, here's an example :
<ItemsControl ...>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button Margin="8" Content="{Binding Name}" Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" CommandParameter="{Binding}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
By defining an horizontal StackPanel as your ItemsControl panel, each item will be aligned next to each other (Note that the default one is a vertical StackPanel).

Related

Filter Control with Select all

I created the following control:
public ObservableCollection<User> Users { get; set; } = new();
<CollectionViewSource
x:Key="UsersKey"
IsLiveFilteringRequested="True"
Source="{Binding Users}"/>
<ItemsControl x:Name="ItemsControlUsers" ItemsSource="{Binding Source={StaticResource Users}}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsSelected}" Checked="CheckBox_OnChecked" Unchecked="CheckBox_OnUnchecked" Content="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And this is how it looks:
And I want to add a CheckBox of Select all.
I would like it to look like this:
The most obvious solution would be to just use a StackPanel add a CheckBox before the ItemsControl. In this case the item does not belong to the ItemsControl. Whether this is acceptable or not depends on your requirements.
<StackPanel>
<StackPanel.Resources>
<CollectionViewSource
x:Key="UsersKey"
IsLiveFilteringRequested="True"
Source="{Binding StringItems}"/>
</StackPanel.Resources>
<StackPanel Orientation="Horizontal">
<CheckBox Content="Select all"/>
</StackPanel>
<ItemsControl x:Name="ItemsControlUsers">
<!-- ...other markup. -->
</ItemsControl>
</StackPanel>
Another solution is to use a CompositeCollection that allows you to bind multiple collections and also add single elements. All of the items are then part of the ItemsControl.
<Border>
<Border.Resources>
<CollectionViewSource
x:Key="UsersKey"
IsLiveFilteringRequested="True"
Source="{Binding Users}"/>
</Border.Resources>
<ItemsControl x:Name="ItemsControlUsers">
<ItemsControl.ItemsSource>
<CompositeCollection>
<StackPanel Orientation="Horizontal">
<CheckBox Content="Select all"/>
</StackPanel>
<CollectionContainer Collection="{Binding Source={StaticResource UsersKey}}"/>
</CompositeCollection>
</ItemsControl.ItemsSource>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsSelected}" Checked="CheckBox_OnChecked" Unchecked="CheckBox_OnUnchecked" Content="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>

Bind Count of ItemsSource of an ItemsControl in a TextBlock using WPF

I want to bind a Count of ItemsSource of an ItemsControl in a TextBlock using WPF.
Have a Look into my tried Code
<Menu>
<MenuItem>
<MenuItem.Header>
<TextBlock Text="{Binding Path=(ItemsControl.ItemsSource.Item, RelativeSource={RelativeSource TemplatedParent}}" />
</MenuItem.Header>
<ItemsControl ItemsSource="{Binding PersonCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" Margin="2" MinWidth="100">
<TextBlock Text="{Binding Value.Text}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</MenuItem>
</Menu>
Note: I need to get the count based on ItemsControl ItemsSource not by the Collection.Count Property. Kindly assist me.
This is the solution:
<Menu>
<MenuItem>
<MenuItem.Header>
<TextBox Text="{Binding ElementName=ItemsControl, Path=Items.Count, Mode=OneWay}" />
</MenuItem.Header>
<ItemsControl x:Name="ItemsControl"
ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Margin="2"
MinWidth="100">
<TextBlock Text="{Binding Value.Text}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</MenuItem>
</Menu>
Does it work for you?

Only first control of dynamic created comboboxes has edited style template?

I have a ItemsControl that creates dynamically some ComboBoxes. I have my own style, but for some reason only the first ComboBox has that style.
<ItemsControl Name="MyItemsControl" Grid.Row="4" ItemsSource="{Binding MyList}" Margin="10,0,10,10">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<ComboBox ItemsSource="{Binding ObjectsList}"
Style="{StaticResource MyComboBoxStyle}"
SelectionChanged="ComboBox_SelectionChanged" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Show scrollbars on ItemsControl item

How can every item inside the ItemsControl - here it is a TextBox - show vertical scrollbars ?
I do not want a vertical scrollbar around all Expanders.
Thats the code I tried:
<ItemsControl ScrollViewer.HorizontalScrollBarVisibility="Hidden" ItemsSource="{Binding Path=ErrorLogs}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsVirtualizing="True" VirtualizationMode="Recycling"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Margin="0" Header="{Binding FileName}" Background="Green">
<Controls:BindableTextBox Background="Red"
Text="{Binding Content, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You have two options
1, wrap inside a scrollviewer
<DataTemplate>
<Expander Margin="0"
Header="{Binding FileName}"
Background="Green">
<ScrollViewer VerticalScrollBarVisibility="Visible">
<Controls:BindableTextBox Background="Red"
Text="{Binding Content, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</ScrollViewer>
</Expander>
</DataTemplate>
2, enable multiline on textbox
eg.
<DataTemplate>
<Expander Margin="0"
Header="{Binding FileName}"
Background="Green">
<TextBox Background="Red"
AcceptsReturn="True" TextWrapping="Wrap"
Text="{Binding Content, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Expander>
</DataTemplate>
I am not sure about Controls:BindableTextBox so using multiline depends on availability

Orientation of StackPanel is not Working in ItemsControl (WPF)

My WPF Application is generating dynamic Buttons. I want to show these Button Horizontally. I wrote Code for this. Code is working fine but rather than showing button in Horizontal Direction, it is showing all Buttons in Vertical Direction! Where i also set Orientation of StackPanel!
Can anyone solve my Problem?
My Code is:
<Grid>
<dxlc:ScrollBox>
<ItemsControl x:Name="Buttonslist">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding Text}" Tag="{Binding Text}" x:Name="New" Margin="5,0,5,0" Click="New_Click" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</dxlc:ScrollBox>
</Grid>
You're actually creating a StackPanel for each item/Button. To get just one for all the items you need to set the ItemsPanel of the control to a StackPanel.
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Text}" Tag="{Binding Text}" x:Name="New" Margin="5,0,5,0" Click="New_Click" />
</DataTemplate>
</ItemsControl.ItemTemplate>

Categories