UWP targeting listview item template property - c#

i'm trying to make my App Design responsive.
i have ListView that have a dataTemplate with defined property:
<ListView x:Name="listView" ItemsSource="{x:Bind manager.recentVideos}"
IsItemClickEnabled="True"
ItemClick="ListView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate x:DataType="data:VideoItem" >
<Image Width="200"
Source="{x:Bind TileImage}" Margin="-10,0,-10,5"
></Image>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm trying to change Image Width with VisualStateTrigers...
so i need to Target Setter to this property somehow....
Someone please help! :)

VisualStateTriggers are not supported inside DataTemplates. Just use a UserControl as your DataTemplate as is suggested in this:
AdaptiveTrigger and DataTemplate

Related

How to create a template with parameters in WPF?

I have 3 List views. They are very similar. The only difference is that their ItemsSource binds to different variables. Is there a way to create a template list view with unknown ItemsSource, and I can pass a parameter to fill that ItemsSource?
My code is something like this:
<ListView Name="View1" ItemsSource={"Binding Student1"}>
<TextBlock Text={"Binding Name"}/>
</ListView>
<ListView Name="View2" ItemsSource={"Binding Student2"}>
<TextBlock Text={"Binding Name"}/>
</ListView>
<ListView Name="View3" ItemsSource={"Binding Student3"}>
<TextBlock Text={"Binding Name"}/>
</ListView>
Edit:
I might have expressed my question in a wrong way. I would like to have a separate user control view called "StudentView":
<ListView ItemsSource=Parameter1>
<TextBlock Text={"Binding Name"}/>
</ListView>
So that in my main window, I can do something like this:
<local:StudentView Parameter1={"Binding Student1"}/>
You are on the right track with thinking about templating
What you are looking for is something called a ControlTemplate.
Your ControlTemplate would then target the ListView control and use the key word TemplateBinding to pass through the ItemsSource binding from your ListView
You would look to add this as a window resource as shown below.
<Window.Resources>
<ControlTemplate x:Key="ListViewTemplate" TargetType="ListView">
<ListView ItemsSource="{TemplateBinding ItemsSource}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ControlTemplate>
</Window.Resources>
This would enable you to use this template on your ListView controls as shown below
<ListView Template="{StaticResource ListViewTemplate}" ItemsSource="{Binding PersonList}"/>
<ListView Template="{StaticResource ListViewTemplate}" ItemsSource="{Binding PersonList1}"/>
<ListView Template="{StaticResource ListViewTemplate}" ItemsSource="{Binding PersonList2}"/>
Hope this gives you what you were looking for

c# WPF How to Remove listview header seperator line?

How to Remove this header seperator line
<ListView ItemsSource="{Binding ...}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
...
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
this is my ListView
Unless I'm missing something, is this not just a matter of setting the BorderThickness property to zero on your ListView?
<ListView ItemsSource="{Binding}" BorderThickness="0">
That should be the solution given the information provided in your question.
If you define some container in your ItemTemplate that has a border, the solution would be similar.

How to create a wpf template with nested datatemplate (datatemplate in datatemplate)

I'm totaly new to wpf. I try to create a nested datatemplate like this layout (datatemplate inside another datatemplate). I managed to create a datatemplate and to connect to "Object A" in an ObservableCollection, which worked really well. Now I need to have a nested ObservableCollection in each Object A to display Object B and Object C in columns. But I don't really know how to do that and can't find examples.
Maybe anyone could give me a hint?
Thanks and regards,
Marlene
Assuming you're using a ListView or ListBox to display a collection of Object A (lets call it ObjectACollection), and that Object A has properties named (in this example) ObjectBCollection and ObjectCCollection you could do something like this:
<UserControl xmlns:namespaceA="clr-namespace:MyProj.Models.ObjectANamespace"
xmlns:namespaceB="clr-namespace:MyProj.Models.ObjectBNamespace"
xmlns:namespaceC="clr-namespace:MyProj.Models.ObjectCNamespace" >
<ListBox ItemsSource="{Binding ObjectACollection}">
<ListBox.ItemTemplate>
<DataTemplate DataType="namespaceA:ObjectA">
<StackPanel Orientation="Horizontal">
<ListBox ItemsSource="{Binding ObjectBCollection}">
<ListBox.ItemTemplate>
<DataTemplate DataType="namespaceB:ObjectB">
<TextBlock Text="{Binding ObjectBProperty}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox ItemsSource="{Binding ObjectCCollection}">
<ListBox.ItemTemplate>
<DataTemplate DataType="namespaceC:ObjectC">
<TextBlock Text="{Binding ObjectCProperty}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl>

CollectionView with WPF (or something like that)

I've try to adopt the CollectionView of iOS on WPF. The background is the migration of an iOS App to a Windows Store App (Windows 10 Universal App).
I try to create a List of clickable objects which contain:
a label
a image
How can I do this? It should look like this:
http://i.stack.imgur.com/ETsqy.png
Can somebody give me an example of XAML code for my purpose?
Sure. Google for itemscontrol, there you get in "ItemsSource" a specific type of model (Class), and that class type is your itemscontrol dataContext.
in this control you can handle ItemTemplate in order to create a template to the given class.
<ItemsControl Name="icTodoList" ItemsSource="{Binding MyClass}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Image)"
<TextBlock Text="{Binding Title}"
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Custom ListView control with WrapPanel

I am looking for a custom ListView control which arranges the items horizontally and if the max width is reached, add the item to the next row.
The WrapGrid as ListView.ItemsPanel doesn't work because it uses equal width for each item (grid structure).
The WrapPanel from the WinRT XAML Toolkit has no ItemTemplate and I cannot use binding due to missing ItemSource property.
Could I write my own ListView implementation with wrapping? Which methods do I need to override?
The solution is to use the WrapPanel from WinRT XAML Toolkit inside the ListViews ItemsPanel:
<ListView x:Name="Keywords" SelectionMode="Multiple" ItemContainerStyle="{ThemeResource ListViewItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>

Categories

Resources