Sending SelectedIndex of ListView to ViewModel through CommandParameter - xaml

after a quite bit of googling I haven't found answer on this problem.
I have this ListView
<ListView x:Name="itemListView" ItemsSource="{Binding History}" HorizontalAlignment="Stretch">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border Style="{StaticResource Border}" Background="{ThemeResource GradientLinear}" HorizontalAlignment="Stretch">
<Grid>
<StackPanel Orientation="Vertical" Margin="10,10,10,10" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0">
<TextBlock Text="{Binding name}" />
<TextBlock Text="{Binding question}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding vrijeme}"/>
</StackPanel>
<Button Width="50" Height="50" Opacity="0.6" Grid.Row="0" Grid.Column="1" Tag="{Binding name}"
Command="{Binding ElementName=itemListView, Path=DataContext.Delete}" CommandParameter="{Binding ElementName=itemListView, Path=SelectedIndex}"
HorizontalAlignment="Right">
<SymbolIcon
HorizontalAlignment="Center"
Width="48"
Height="48"
Symbol="Delete" />
</Button>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Problem is probably in this part of the code
<Button Width="50" Height="50" Opacity="0.6" Grid.Row="0" Grid.Column="1" Tag="{Binding name}"
Command="{Binding ElementName=itemListView, Path=DataContext.Delete}" CommandParameter="{Binding ElementName=itemListView, Path=SelectedIndex}"
HorizontalAlignment="Right">
When I click Button, ListViewItem that contains that Button is not selected so I get -1 for SelectedIndex or just null if I target SelectedItem. It seems that clicking that button leaves containing ListViewItem unaffected. If I first click ListViewItem and than click button it works, SelectedItem is set in ListView of course, but I can't count user will understand that. My question is - is there any way to "force" Button to send me in CommandArgument SelectedItem or SelectedIndex. I know how to do that through code-behind but I am interested in solving this problem through MVVM.
Thanx in advance.

Related

Styling ListView in UWP

I found this question + answer to my problem here on stackoverflow, but for me its not totally clear where to change the
ListViewItemPresenter
I tried many things, but it seems like I cant find it on my own :(
Here is my XAML code for this frame:
<Page.Resources>
<DataTemplate x:Key="ItemListDataTemplate" x:DataType="data:Item">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource ItemListDataTemplate}"
>
</ListView>
</Grid>
Can someone help me our please? Thank you very much for your time!
There are two ways to edit ListViewItemPresenter in your Page:
You can copy the XAML Template from here (the first XAML codes block below Default Style). Add it to your Page.Resources. ListViewItemPresenter lies among those XAML codes, you can edit its Properties and this style will be applied to all the items of this page's ListView. Notes: don't add x:Key to this style.
Add a ListViewItem Control to your Page like below:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListViewItem></ListViewItem>
</Grid>
Document Outline->Select ListViewItem->Edit Template->Edit a Copy:
Remove the x:Key Property of generated Style Resource, so that this style will be applied to all ListViewItem. Then you can edit the ListViewItemPresenter in the generated XAML Resource.
Just add your DataTemplate inside of the Listview.
Put it in the ItemTemplate property.
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Listiview Item not highlighting when hovering over - UWP (Windows 10)

I have a UserControl used as an item template in a ListView and when I hover a specific item it doesn't highlight it yet I have other ListViews in my project where the specific item is highlighted over.
I've removed the code from my UserControl and copy/pasted it directly in my DataTemplate to check if it was related to the fact that I was using a UserControl but no difference.
This ListView is contained in a SemanticZoom, so again I removed the SemanticZoom to check if the behaviour would change, but to no avail! Still doesn't get highlighted.
All my ListViews have their SelectionMode set to Single and I've got a style defined at the app level which is applied to all my ListViews
This is the code in my UserControl:
<UserControl
x:Class="MyApp.UserControls.ZoomedIn"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.UserControls"
xmlns:converters="using:MyApp.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="470">
<UserControl.Resources>
<converters:WrapOnConverter x:Key="WrapOnConverter"/>
</UserControl.Resources>
<Grid x:Name="Details"
Background="White"
Grid.Column="0"
Grid.Row="0"
Margin="12,5,12,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image x:Name="Image"
Source="{Binding Image}"
Width="100"
Height="100"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Image x:Name="Image2"
Source="{Binding Image2}"
Width="30"
Height="30"
Margin="67,67,0,0"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Image x:Name="Image3"
Source="{Binding Image3}"
Width="30"
Height="30"
Margin="32,67,0,0"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<StackPanel Margin="5,0,5,0"
Grid.Row="0"
Grid.Column="1"
VerticalAlignment="Top">
<TextBlock x:Name="Title"
Text="{Binding Title}"
Foreground="{ThemeResource
SystemControlForegroundAccentBrush}"
FontWeight="SemiBold"
VerticalAlignment="Top"
TextWrapping="{Binding
Converter={StaticResource WrapOnConverter}}" />
<TextBlock x:Name="Time"
Text="{Binding Time}"
Foreground="DarkCyan"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="0,5,0,5" />
<TextBlock x:Name="Description"
Text="{Binding Description}"
Foreground="Black"
TextWrapping="Wrap"
VerticalAlignment="Top"
HorizontalAlignment="Left"
MaxLines="2"/>
</StackPanel>
</Grid>
</UserControl>
And my ListView is defined as follows:
<ListView ItemsSource="{Binding Source={StaticResource cvsDetails}}"
SelectionMode="Single"
SelectedIndex="{Binding SelectedDetailIndex}"
SelectedItem="{Binding SelectedDetail, Mode=TwoWay}"
ItemContainerStyle="{StaticResource ListViewItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<usercontrols:ZoomedIn DataContext="{Binding}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="20"
Text="{Binding CategoryName}"
Foreground="{ThemeResource
SystemControlForegroundAccentBrush}"
FontWeight="SemiBold" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Core:InvokeCommandAction
Command="{Binding ItemClickCommand}"
CommandParameter="{Binding SelectedDetail}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListView>
Does anyone have any ideas why one ListView would be behaving differently to the others?
Thanks.
The item is not highlighted because you have the Background="White" set, and this color will always be above the highlight color. The UserControl background needs to be set to Transparent.
To make it work the way you want, you need to change the ItemContainerStyle of your ListView. If you have different elements in your ListView you can use ItemContainerStyleSelector.
You can read more about ListViewItem here.
You need the change the Background property of list view items, for example:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="White"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>

how to make listbox is resizable inside its parent?

In a user control, I put a listbox which is bound to a dynamic datasource. This usercontrol will be in a popup window. I want to this list box can fill the rest of space of the window. Here is the Xaml I tried:
<ComboBox x:Name="cmbx1" Grid.Column="0" Grid.Row ="0" Margin="5"
Width="150" VerticalAlignment="Center" HorizontalAlignment="Left" SelectionChanged="filters_SelectionChanged">
......
</ComboBox>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1" Grid.Row="0">
<Button Content="Test" Margin="5" Click="Button_Add" />
</StackPanel>
<DataGrid x:Name="ListGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
......
</DataGrid>
<ComboBox x:Name="cmb2" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5">
......
</ComboBox>
<ListBox x:Name="lstSharing" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,10,0"
Width="{Binding Width, ElementName=ListGrid}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tkit:WrapPanel Orientation="Horizontal" MaxWidth="650" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="3" Width="Auto">
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" />
<TextBlock Text="{Binding ItemName}" Width="120" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What I want it height and width of list box can be setup dynamically based on windows size, the items bound to list box. But it is not working properly. Initially, the listbox has no scrollbar, I need to resize window manually so that scrollbar on display. I can not dynamically to change with, so I put MaxWidth =600. Otherwise, it always display all item in one row.
How to resolve this problem?
This is untested, but I would try something like this:
<ListBox x:Name="lstSharing"
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="0,0,10,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tkit:WrapPanel Orientation="Horizontal"
MaxWidth="{Binding ElementName=lstSharing, Path=ActualWidth}" />
</ItemsPanelTemplate>
It's a little difficult to know whether this will work without seeing the parent containers, but it should point you in the right direction.

WinRT XAML - How to strech button horizontal in ListView

I'm trying to horizontal strech button inside ListView, but my xaaml code doesn't work:
<ListView Grid.Row="2" ItemsSource="{Binding Path=Items}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Button Grid.Row="2" Background="White" BorderThickness="4,0,0,1" BorderBrush="#8c0095" Margin="32,-3,32,17" Padding="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<TextBlock Text="{Binding Name}" Foreground="#8c0095" FontSize="20" Margin="15,1,0,10" FontWeight="Medium" />
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How can I solve this?

the property content is set more than once

I am getting the following error with my code shown below.
Error:
The property 'Content' is set more than once
Code:
<controls:PanoramaItem Header="headlines">
<TextBlock Text="{Binding Tones}" />
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Tones}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Source="{Binding ImageUrl}" Height="75" Width="100"
Margin="12,10,9,0" VerticalAlignment="Top"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextLargeStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
A PanoramaItem can only have one child control but you currently have a TextBlock and a ListBox. To fix this, simply add another parent control to hold the TextBlock and ListBox (such as a StackPanel or a Grid). For example:
<controls:PanoramaItem Header="headlines">
<grid>
<TextBlock Text="{Binding Tones}" />
<!--Double line list with image placeholder and text wrapping-->
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Tones}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Image Source="{Binding ImageUrl}" Height="75" Width="100" Margin="12,10,9,0" VerticalAlignment="Top"/>
<!--<Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="12,0,9,0"/>-->
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
<!--<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>-->
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</grid>
</controls:PanoramaItem>