When I create ItemsControl and grouping it, for example:
<CollectionViewSource x:Key="items" Source="{Binding Items}">
<CollectionViewSource.GroupDescriptions>
<swd:PropertyGroupDescription PropertyName="User"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
<ItemsControl ItemsSource="{Binding Source={StaticResource items}}"
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"</TextBlock>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding item}"></TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Now, with default stlye it's looks somthing like this:
Group name
item1, item2, item3 etc.
But I don't want items in new line, I want it in the same line with group name, like this:
Group name item1, item2, item3 etc.
How to do it? I know that probably need to create Style but I don't know which property excatly I need to change.
You probably have to overwrite the Template of the GroupItem using the GroupItem.ContainerStyle.
Related
I want to realize a custom view just like ListView.
Now the problem is I want get a Tapped event from group header, maybe more.
It always creates GroupItem as group view, and can't be change.
I found what ListView do is create ListViewHeaderItem by the system and added to the visual tree when realizing the GroupStyle.HeaderTemplate.
My question is any way to do this?
cs:
public class CustomView : ItemsControl
xaml:
<CollectionViewSource x:Name="itemCVS" IsSourceGrouped="True"
Source="{x:Bind Groups}" ItemsPath="Items"/>
...
<CustomView ItemsSource="{x:Bind itemCVS.View}">
<CustomView.GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<CustomPanel/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</CustomView.GroupStyle>
</CustomView>
CustomView Visual Tree:
CustomView
Windows.UI.Xaml.Controls.Border
Windows.UI.Xaml.Controls.ScrollViewer
Windows.UI.Xaml.Controls.Border
Windows.UI.Xaml.Controls.Grid
Windows.UI.Xaml.Controls.ScrollContentPresenter
Windows.UI.Xaml.Controls.ItemsPresenter
Windows.UI.Xaml.Controls.ContentControl
CustomPanel
Windows.UI.Xaml.Controls.GroupItem
Windows.UI.Xaml.Controls.Grid
Windows.UI.Xaml.Controls.ContentControl
Windows.UI.Xaml.Controls.ContentPresenter
Windows.UI.Xaml.Controls.TextBlock
Windows.UI.Xaml.Controls.ItemsControl
Windows.UI.Xaml.Controls.ItemsPresenter
Windows.UI.Xaml.Controls.ContentControl
CustomPanel
Item 1
Item 2
ListView Visual Tree:
Windows.UI.Xaml.Controls.ListView
Windows.UI.Xaml.Controls.Border
Windows.UI.Xaml.Controls.ScrollViewer
Windows.UI.Xaml.Controls.Border
Windows.UI.Xaml.Controls.Grid
Windows.UI.Xaml.Controls.ScrollContentPresenter
Windows.UI.Xaml.Controls.ItemsPresenter
Windows.UI.Xaml.Controls.ContentControl
Windows.UI.Xaml.Controls.ItemsStackPanel
Windows.UI.Xaml.Controls.ListViewHeaderItem
Windows.UI.Xaml.Controls.ListViewHeaderItem
Windows.UI.Xaml.Controls.ListViewItem 1
Windows.UI.Xaml.Controls.ListViewItem 2
You code has generated the HeaderItem.
Because your CustomerView inherits from ItemsControl, the generated HeaderItem has no style.
So if you want to do this, please manually add to change the style like following.
<CustomerView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<ListViewHeaderItem>
<StackPanel>
<TextBlock Text="{Binding Key}"/>
</StackPanel>
</ListViewHeaderItem>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</CustomerView.GroupStyle>
I have two ItemsControls with the same ItemsSource. One has some controls for each item, the other has a checkbox for each item. The controls in them are dynamically added. How can I bind the visibility of the first ItemsControls to the corresponding checkbox in the other ItemsControls ?
Here's the first ItemsControl containing multiple TextBlocks in the row. Note: I want to hide the whole row of controls.
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock />
<TextBlock />
<TextBlock />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Here's the second ItemsControl with the checkboxes:
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<CheckBox Content="{Binding Name}"
IsChecked="True" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
So what happens is, for each item in VehicleCollection, a new row of textblocks is added for the first ItemsControl, and a checkbox is added for the second ItemsControl. These should relate to each other for example: If I uncheck the first checkbox, the first row for the other ItemsControl should be hidden.
I know how to do the booltovis converter, just not sure on how to relate these two ItemsControls.
Edit: These are both in the mainwindow.xaml by the way.
In order to show or hide an item of the first ItemsControl, add an IsVisible property to your Vehicle class (i.e. the element type of the VehicleCollection) and bind the Visibility of the item's ContentPresenter to the IsVisible property in an ItemContainerStyle:
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Visibility"
Value="{Binding IsVisible,
Converter={StaticResource BooleanToVisibilityConverter}}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
In the other ItemsControl, bind the IsChecked property of the CheckBox to the IsVisible property:
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}" IsChecked="{Binding IsVisible}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Of course make sure that class Vehicle implements INotifyPropertyChanged and fires the PropertyChanged event when the IsVisible property changes.
You should be able to manage this by adding a boolean Property in your Vehicle class, which I presume is the basis for your VehicleCollection. Something like: IsSelected.
Then you can modify your XAML as shown below:
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Visibility="{Binding IsSelected,Converter={StaticResource boolToVisConverter}}"/>
<TextBlock Visibility="{Binding IsSelected,Converter={StaticResource boolToVisConverter}}"/>
<TextBlock Visibility="{Binding IsSelected,Converter={StaticResource boolToVisConverter}}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<CheckBox Content="{Binding Name}"
IsChecked="{Binding IsSelected}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This is untested XAML, as I just typed it into the answer. Might need a tweak.
I have a ListView that uses GridView to display some data. One of the fields contains a list with image paths. Therefore I defin a GridViewColumn and create a DataTemplate. Dis DataTemplate contains another ListView with the Images list as new DataContext. When I don't write anything in the inner StackPanel, I can see that a list of string (in the format AppName.ClassName) is displayed in left to right order.
But whenever I try to display the strings as something else, eg
<Image Source="{Binding Name}" Height="32"/>
I get an System.Windows.Markup.XamlParseException . Even with data binding I get an exception. Eg
<Image Source="Images/Camera_32xLG.png" Height="32"/>
. Any hint, what I might do wrong?
<GridViewColumn Header="Images">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding Images}" BorderThickness="0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
--> here is where I don't know what to do next
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Since the StackPanel is a part of ItemsPanelTemplate, you should just define it's properties and not explicitly add any children. The way to specify appearance of each item is through the ListView.ItemTemplate property:
<ListView ItemsSource="{Binding Images}" BorderThickness="0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Name}" Height="32" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am trying to make a column chart using WPF. For the Y axis I have a list of values which I would like to display on the control.
I have a ListView bound to the collection. How can I get the items to spread over the entire length of the list view rather then squish together at the top? And is the ListViewthe correct control to use for this?
Here is a sample of my Xaml:
<ListView Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"
ItemsSource="{Binding YAxisValues}"
Background="Gray" VerticalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=Value}"
Foreground="White"
HorizontalAlignment="Left"
FontSize="12" Width="50"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
On the left is the list view as i currently have it.
On the right is my desired result.
How can I change my ListView to get there? Or do I need to use a different control entirely?
with UniformGrid used as ItemsPanel items get equal height
<ListView Name="Axis" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"
ItemsSource="{Binding YAxisValues}"
Background="Gray" VerticalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<!--no changes-->
</ListView.ItemTemplate>
</ListView>
there can be a issue when ListView doesn't have enough height for all elements. In that case I would put ListView into ViewBox
Set HorizontalContentAlignment to Stretch for items.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I'm kind of shooting in the dark on this one and have been looking around but couldn't find much of anything related. Pretty much I am trying to create an ItemsControl on a current Window that I've got, so when the user clicks an "Add Product" button on the window, it will add a UserControl to the screen in a horizontal matter.
For starters I am using an MVVM pattern and I have a PricingViewModel which is my ViewModel for the MAIN window. I have a second view model named ComparisonViewModel, which is the ViewModel for the View of the UserControl that I would like to show everytime the user hits the "Add Product" button on the PricingView. Jumping into my code, I've got a declared ObservableCollection and my AddComparison method. The Collection is instantiated in the constructor of the VM.
public ObservableCollection<ComparisonViewModel> Products { get { return _products; } }
public void AddComparison()
{
var products = IoC.Get<ComparisonViewModel>();
Products.Add(products);
}
Next, I've got and ItemsControl in the PricingView that binds to that collection in the PricingViewModel:
<ItemsControl ItemsSource="{Binding Path=Products}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
I run it and after hitting add, it just shows the collection name. How can I actually get it to Pop up with a new Comparison User Control when the user hits Add Comparison? Thanks a ton for the help in advance!
You'll want to set the ItemTemplate so the ItemsControl knows how to render each item in the collection (by default, it is just displaying the result of calling .ToString()).
<ItemsControl ItemsSource="{Binding Path=Products}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type namespace:ComparisonViewModel}">
<!-- EXAMPLE -->
<Border BorderBrush="Black"
BorderThickness="2">
<DockPanel Orientation="Horizontal">
<TextBlock Text="{Binding ComparisonResult}"
DockPanel.Dock="Right" />
<TextBlock Text="{Binding Name}"
DockPanel.Dock="Left" />
</DockPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have found that I needed to tell the ItemsControl two things... First is what type of "thing" the ItemsControl is:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
And the second is how to display the Control:
<ItemsControl.ItemTemplate>
<DataTemplate>
<c:Widget Margin="5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
The final code looks like:
<ItemsControl ItemsSource="{Binding Path=DynamicItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<c:Widget Margin="5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You also need to add a reference to your control namespace in the window declaration stuff:
xmlns:c="clr-namespace:IHateEverything.Controls"