I'm trying to change the datatemplate of a selected item in a listview, everything I have found is overly complicated or obsolete.
I've tried using behaviours but it still doesn't work. this is what I am after
<UserControl.Rescources>
<DataTemplate x:DataType="dt" x:Key="notselected">
<Grid>
<Textblock Text="{Binding Title}" Foreground="White"/>
<Image Source="ms-appx:///Assets/myimage.png"/>
</Grid>
</DataTemplate>
<DataTemplate x:DataType="dt" x:Key="selected">
<Grid>
<Textblock Text="{Binding Title}" Foreground="Black"/>
<Image Source="ms-appx:///Assets/myselectedimage.png"/>
</Grid>
</DataTemplate>
</UserControl.Rescources>
<ListView x:Name="listview" ItemTemplate="{StaticResource TMP1}">
<ListView.ItemContainerStyle>
<StaticResource ResourceKey="ListViewItemStyle1"/>
</ListView.ItemContainerStyle>
and just to have it switch to TMP2 while selected
is this possible?
thanks
In your ListView you need to set ItemTemplateSelector to your implementation of DataTemplateSelector. In the code above, you have set ItemTemplate
Assuming TMP1 refers to your DataTemplateSelctor it would look like <ListView x:Name="listview" ItemTemplateSelector="{StaticResource TMP1}"...
Related
When an item is selected in my ListView, I want to display a specific user control in the my ContentControl.
Using the following code, my content control merely displays "Microsoft.UI.Xaml.Data.CollectionView". I understand the ContentControl is trying to bind to the entire list, but how do I tell it to bind to the CollectionViewSource's CurrentItem?
<Page.Resources>
<CollectionViewSource x:Name="PChoicesCollectionView" Source="{x:Bind ViewModel.PChoices}"/>
</Page.Resources>
<ListView ItemsSource="{Binding Source={StaticResource PChoicesCollectionView}}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="p:PBase">
<Grid>
<TextBlock Text="{x:Bind Name.Name}" FontSize="18" FontWeight="SemiBold"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentControl ContentTemplateSelector="{StaticResource pDataTemplateSelector}" Content="{Binding Source={StaticResource PChoicesCollectionView}}"/>
You could bind to the SelectedItem property of the ListView:
<ListView Name="lv"
ItemsSource="{Binding Source={StaticResource PChoicesCollectionView}}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="p:PBase">
<Grid>
<TextBlock Text="{Binding}" FontSize="18" FontWeight="SemiBold"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentControl ContentTemplateSelector="{StaticResource pDataTemplateSelector}"
Content="{Binding SelectedItem, ElementName=lv}"/>
In the example below, the ListView control understands the width of it's parent container RelativePanel. When looking a the layout in the designer, it is clear that the ListView is filling out to the full width of the RelativePanel. However, even though the RelativePanel inside the DataTemplate is also asking to fill out the width of the parent, it ignores the "align left" and "align right". I can't seem to find any way to get it to recognize it's parent container's size.
Any suggestions here would be appreciated.
<RelativePanel RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<ListView Name="LstOrders" ItemsSource="{x:Bind Vm.OrdersList, Mode=OneWay}"
SelectionMode="None"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,5,0,0">
<ListView.ItemTemplate>
<DataTemplate x:DataType="genericOrder:OrderThumbnailVm">
<RelativePanel Name="PanelThumbnail" Margin="0,0,20,0">
<RelativePanel Name="PanelOrderDetails"
Background="BlueViolet"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<TextBlock Text="{x:Bind Name}" Margin="8,0,0,0" VerticalAlignment="Center"
Foreground="{x:Bind Deleted, Mode=OneWay, Converter={StaticResource DeletedColor}}"
TextWrapping="WrapWholeWords"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.LeftOf="BtnDeleteRestore"/>
<Button Name="BtnDeleteRestore"
Content="{x:Bind DisplayDelete, Mode=OneWay}"
Click="{x:Bind DeleteOrder}"
RelativePanel.AlignRightWithPanel="True"
FontSize="10"
Height="20"
Padding="0"
Visibility="{x:Bind ShowDeleteButton, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
</RelativePanel>
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativePanel>
That is because the value of HorizontalContentAlignmentof ListViewItem is Left, we need to override it and make it Stretch. You can find it in the ListViewItem styles and templates.
To solve this problem, as I said, we need to override its style, for example like this:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<RelativePanel>
...
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have a list of users on my viewmodel that I pass to the following listView:
<ListView
Background="Azure"
x:Name="ContactList"
ItemsSource="{Binding Path=User}"
SelectedItem="{Binding SelectedUser, Mode=TwoWay}">
<ListView.ItemTemplate>
<DataTemplate>
<Border Width="300" Height="Auto" BorderThickness="1">
<StackPanel>
<TextBlock>
<Run Text="{Binding Name}" />
<Run Text="{Binding Age}" />
</TextBlock>
<CheckBox Visibility="{???}">
<TextBlock FlowDirection="LeftToRight"></TextBlock>
</CheckBox>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
As you can see my DataTemplate contains a checkbox. I would like its Visibility to depend on a bool-property I have on my ViewModel. How can I access this property from within the listView?
From looking around here it seems like there are ways to access the ListView-items parent. I think that would do it for me. Can someone point me in the right direction . Thanks
The best way to do this is to include the visibility setting along with your user data. Assuming your view model visibility property is named CheckBoxVisibility, you would have something like this:
<ListView ItemsSource="{Binding}" ...>
<ListView.ItemTemplate>
<DataTemplate>
...
<Run Text="{Binding Path=User.Name}" />
<Run Text="{Binding Path=User.Age}" />
...
<CheckBox Visibility="{Binding Path=CheckBoxVisibility}">
...
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In WPF, you can use a RelativeSource=RelativeAncestor binding; however, this is not available in Window Store/Windows Phone 8+ apps.
I have troubles with binding data to a Listbox to dynamically create ExpanderView.
I have used Listboxes in my Code before, so I'm not sure if the binding is really the problem. Am I setting the contents of ExpanderView wrong?
My Code so far in XAML:
<ListBox x:Name="Newsticker_Listbox">
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:ExpanderView Header="{Binding}" Expander="{Binding}" ItemsSource="{Binding}"
HeaderTemplate="{StaticResource CustomHeaderTemplate}"
ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
ItemTemplate="{StaticResource CustomItemTemplate}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
the Templates:
<!--newsfeed templates-->
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="CustomHeaderTemplate">
<TextBlock Text="{Binding Title}" />
</DataTemplate>
<DataTemplate x:Key="CustomExpanderTemplate">
<Image Source="{Binding Subtitle}" />
</DataTemplate>
<DataTemplate x:Key="CustomItemTemplate">
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
I'm binding with
ObservableCollection<news> newslist = new ObservableCollection<news>();
//populate
Newsticker_Listbox.ItemsSource = newslist;
news is a really simple object, it just stores some strings, which can be read out by news.Title, news.Subtitle etc
I've used the example from http://www.geekchamp.com/articles/expand-and-collapse-expanderview-inside-data-bound-listbox-via-code as basic for my code, I've just simplified it for my cause (mabye too much?)
Help is very appreciated, thank you all in advance
EDIT
This code works so far, but why does the solution with templates not work?
<ListBox x:Name="Newsticker_Listbox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<toolkit:ExpanderView>
<toolkit:ExpanderView.Header>
<TextBlock Text="{Binding Titel}" />
</toolkit:ExpanderView.Header>
<toolkit:ExpanderView.Expander>
<TextBlock Text="{Binding Untertitel}" />
</toolkit:ExpanderView.Expander>
<toolkit:ExpanderView.Items>
<TextBlock Text="{Binding Text}" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Remove your Header={Binding} and Expander={Binding} XAML code. It is overriding your custom HeaderTemplate and ExpanderTemplate.
You bound the Header and the Expander to the context of the application, which it doesn't really understand, so the binding resolved itself to nothing, so your ExpanderView displays nothing.
Here is the XAML:
<ListBox ItemsSource="{Binding Documents}" BorderBrush="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Title}" FontSize="12" FontWeight="Bold" />
<TextBlock Text="{Binding ID}" FontSize="10" FontStyle="Italic" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ContextMenu>
<ContextMenu ItemsSource="{Binding CategoryList}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Command="{Binding AddDocumentToCategoryContextMenuCommand}" Header="{Binding Category.Name}" />
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</ListBox.ContextMenu>
</ListBox>
Ok so the ListBox's ItemSource is bound to the Documents collection in the VM and properly renders the Titles and IDs
The Context Menu's ItemSource is bound to the CategoryList collection in the VM and properly renders the list of categories.
The problem I have is with the Command Binding:
Command="{Binding AddDocumentToCategoryContextMenuCommand}"
Since the ItemSource for the ContextMenu is already set, it tries to get the AddDocumentToCategoryContextMenuCommand from CategoryList. Obviously the command is not there, it is a member of the VM.
I do not want any references to the VMs or Models in the XAML. Everything is constructed using Unity and VM-View is associated in App.xaml:
<Application.Resources>
<DataTemplate DataType="{x:Type vms:FeedViewModel}">
<views:FeedView/>
</DataTemplate>
<DataTemplate DataType="{x:Type vms:DocumentsViewModel}">
<views:DocumentsView/>
</DataTemplate>
<DataTemplate DataType="{x:Type vms:ManagementViewModel}">
<views:ManagementView/>
</DataTemplate>
<DataTemplate DataType="{x:Type dev:DevelopmentViewModel}">
<dev:DevelopmentView />
</DataTemplate>
</Application.Resources>
How can I databind to a member of the VM from within the ContextItem.
Thanks.
UPDATED edit #1 starts Here
Here is the updated xaml (but still not working but some insight gained):
<ListBox ItemsSource="{Binding Documents}" x:Name="Results" BorderBrush="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Title}" FontSize="12" FontWeight="Bold" />
<TextBlock Text="{Binding ID}" FontSize="10" FontStyle="Italic" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ContextMenu>
<ContextMenu ItemsSource="{Binding CategoryList}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Command="{Binding ElementName=Results, Path=DataContext.AddDocumentToCategoryContextMenuCommand}" Header="{Binding Category.Name}" />
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</ListBox.ContextMenu>
</ListBox>
I have this example working for a simple example that does not use a ContextMenu. It appears that the ContextMenu (even though attached to the ListBox) is not part of the user control visual tree. The binding always comes back null / not found. I think the ContextMenu, because it is a floating "window" is constructed in its own tree and therefore cannot find the ListBox call "Results" in order to access the ListBox's DataContext.
Any thoughts on this? Any recommendations on how deal with?
Edit #2 Starts Here
In case you are are wondering, figured out the answer to the binding question:
This binding works:
Command="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.DataContext.AddDocumentToCategoryContextMenuCommand}
Hope this helps others with the same question.
One last update for completeness.
In order for the command to know which context menu item was clicked on, I had to change the xaml slightly (silly oversight):
<ListBox.ContextMenu>
<ContextMenu x:Name="Context" ItemsSource="{Binding CategoryList}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Command="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.DataContext.AddDocumentToCategoryContextMenuCommand}"
CommandParameter="{Binding Category.ID}"
Header="{Binding Category.Name}" />
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</ListBox.ContextMenu>
Again, hope this helps others.
Use the ElementName property of the binding to specify that. You'd end up with something like this:
Command="{Binding ElementName=ViewModelObject
Path=AddDocumentToCategoryContextMenuCommand}"