Button Will Not Fire from Style - c#

Yeah, im not sure what i have done. brain feels like swiss cheese
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Command" Value="{Binding CommandButtonClicked}"/>
<Setter Property="CommandParameter" Value="{Binding Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
</Style>
</Window.Resources>
Button that will Fire.
<Grid DockPanel.Dock="Top">
<TextBox BorderBrush="Transparent" BorderThickness="0" x:Name="txtInput" Padding="50,10,15,15" AcceptsReturn="True" TextChanged="txtInput_TextChanged" TextWrapping="Wrap" Foreground="Crimson" Text="{Binding UserInput, Mode=TwoWay}" Background="Transparent"/>
<Button Width="30" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,3,0,0">
<Image Source="Images/Actions list add user.ico" />
</Button>
</Grid>
Buttons that will not fire
<ListView x:Name="ListViewUsers" ItemsSource="{Binding UserNames}" DockPanel.Dock="Top" Foreground="Green" BorderBrush="Transparent">
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Button Margin="3,0,3,0" Width="30">
<Image Source="Images/Actions user group delete.ico"/>
</Button>
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button>
<Image Source="Images/Actions list remove user.ico" Width="25"/>
</Button>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="User ID" DisplayMemberBinding="{Binding}"/>
</GridView>
</ListView.View>
</ListView>
i have also tried adding in a separate DelegateCommand per button, but that doesnt help either. it seems to be anything that inside this ListView and is Generated at runtime after the initial render will not fire.
any ideas ?

In the "cell" DataTemplate it will have its DataContext set to the "item" within the data collection assigned to the ListView for which the "look" is being provided i.e. a "username".
But your style is using a binding that needs to access the object that contains the "CommandButtonClicked" property.
Thus you need a way to get back to the DataContext that is holding your "CommandButtonClicked" property.....so assuming you had set your "ViewModel" onto your Windows DataContext you could do this...
<ListView x:Name="ListViewUsers" ItemsSource="{Binding UserNames}" DockPanel.Dock="Top" Foreground="Green" BorderBrush="Transparent">
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Button Margin="3,0,3,0" Width="30" DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}},Path=DataContext}">
<Image Source="Images/Actions user group delete.ico"/>
</Button>
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}},Path=DataContext}">
<Image Source="Images/Actions list remove user.ico" Width="25"/>
</Button>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="User ID" DisplayMemberBinding="{Binding}"/>
</GridView>
</ListView.View>
</ListView>
There are alternative ways to do what you are doing...just one suggestion...look up routed commands (you could define one and then use it in your style e.g. Command="{x:Static mynamespace::MyCommands.DoSomething}" and then set up a CommandBinding to handle them).

Related

wpf - set focus on next textbox on gridviewcolumn

I want to step into next row if I hit a specific key like enter or the arrows on keyboard.I can't find any material on this topic. Could anyone help me out?
I tried with tabnavigation from msdn, but first I want to go on keydown directly to the textbox and second I need to use the arrows and / or the enter key I mentioned earlier.
Thank you!
<ListView AlternationCount="2"
x:Name="lstItems" ItemsSource="{Binding Path=Notes, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Height="300"
KeyboardNavigation.TabNavigation="Cycle"
KeyboardNavigation.AcceptsReturn="False"
SelectedItem="{Binding Path=Current, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
FontSize="{StaticResource h2FontSize}" Margin="5">
<ListView.View>
<GridView x:Name="gridView" ColumnHeaderContainerStyle="{StaticResource itemsListViewHeader}"
>
<GridViewColumn x:Name="Column1" Header="{x:Static p:Resources.DENOMINATION}" Width="200">
<GridViewColumn.HeaderContainerStyle>
<Style TargetType="GridViewColumnHeader" BasedOn="{StaticResource itemsListViewHeaderLeft}">
</Style>
</GridViewColumn.HeaderContainerStyle>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock x:Name="BankNoteValue" HorizontalAlignment="Right" Text="{Binding Path=BankNoteValue, StringFormat={}{0:0.##}}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn x:Name="Column2" Header="{x:Static p:Resources.PC}" Width="200">
<GridViewColumn.HeaderContainerStyle>
<Style TargetType="GridViewColumnHeader" BasedOn="{StaticResource itemsListViewHeaderLeft}">
</Style>
</GridViewColumn.HeaderContainerStyle>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Width="{Binding ElementName=Column2, Path=ActualWidth, UpdateSourceTrigger=PropertyChanged}" Name="tbAmount"
Text="{Binding Path=BankNotePiece, StringFormat={}{0:#.###}, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" IsEnabled="{Binding isChecked}">
</TextBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>

How can I group GridViewColumns in WPF, so the expander fills the whole width

I am new to WPF and try to do the following:
I have a ListView with a ItemsSource using a ViewModel.
Inside, there is a GridView with Columns. Each Column represents a Preoperty of the View Model. But the Description is optional and can be rather long. So I want to use a Expander. My Problem is, that I can only manage the expander to be as big as the Name-Column. But I want the expander to be as big as the whole row.
Here are 2 Images to clarify what I want.
My current State:
https://i.stack.imgur.com/ZNA4v.png
What I want to achieve:
https://i.stack.imgur.com/ZmFq1.png
I tried "grouping the GridView" but without success... See here
http://technico.qnownow.com/grouping-gridview-wpf/
Here's my Code
<Window ...>
<Window.Resources>
...
</Window.Resources>
<DockPanel>
<StackPanel DockPanel.Dock="Top">
...
</StackPanel>
<Grid>
<ListView Grid.RowSpan="4" DockPanel.Dock="Top" Margin="10" ItemsSource="{Binding MyView}">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="BorderBrush" Value="Black"></Setter>
<Setter Property="BorderThickness" Value="0,0,0,1"></Setter>
<Setter Property="Focusable" Value="False" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="VerticalContentAlignment" Value="Top"></Setter>
</Style>
</ListView.ItemContainerStyle>
<!-- New GridView -->
<ListView.View>
<GridView>
<!--Number-->
<GridViewColumn Header="#">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<TextBlock Text="{Binding Model.Number, StringFormat='#{0}', Mode=OneWay}"
Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!--ErrorLevel-->
<GridViewColumn Header="" Width="45">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<Image Source="{Binding Model.ErrorLevel, Converter={StaticResource ErrorLevelToImageConverter}, Mode=OneWay}"
ToolTip="{Binding Model.ErrorLevel, Mode=OneWay}" Width="20" Margin="5" VerticalAlignment="Top" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!--ID-->
<GridViewColumn Header="ID">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<TextBlock TextAlignment="Center" Margin="5" Width="50" VerticalAlignment="Top" >
<Hyperlink NavigateUri="{Binding Model.Hyperlink, Mode=OneWay}"
Command="{Binding HyperlinkCommand}">
<TextBlock Text="{Binding Model.Id, Mode=OneWay}" />
</Hyperlink>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!--Name-->
<GridViewColumn Header="Name" Width="500" >
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black" VerticalAlignment="Top">
<Expander.Header>
<TextBlock Text="{Binding Model.Name, Mode=OneWay}"
HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}"
TextAlignment="Left" Margin="5" TextWrapping="Wrap" VerticalAlignment="Top" />
</Expander.Header>
<GroupBox Header="Description" FontWeight="Bold" >
<TextBlock Text="{Binding Model.Description, Mode=OneWay}" TextWrapping="Wrap"
FontWeight="Normal" TextAlignment="Left" Margin="5" />
</GroupBox>
</Expander>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!-- Module-->
<GridViewColumn Header="Module" >
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<TextBlock Text="{Binding Model.Module, Mode=OneWay}"
TextAlignment="Center" Margin="5" Width="100" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
</DockPanel>
Once again, i am new to WPF, MVVM, DataBinding and all this. So please try to make your answer as detailed as possible. I tried many things, but they didn't work out.
You could add the following GridViewColumn at the left side (top in XAML) to your GridView
<GridViewColumn Header="" Width="30">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="viewModel:MyViewModel">
<Expander Margin="-5,2,-5000,0" HorizontalAlignment="Left" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ItemsPresenter}}}">
<GroupBox Header="Description" FontWeight="Bold" Margin="0,0,5,0">
<TextBlock Text="{Binding Model.Description}" FontWeight="Normal" TextWrapping="Wrap" />
</GroupBox>
</Expander>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
This is GridViewColumncontains an empty Header which simply shows the Expander-Arrow in the GridViewRows.
The Expander itself is left aligned and has a huge negative Margin on the right side, so it can draw its content outside of the right boundary. The width is set to the ActualWidth of the ItemsPresenter of your GridView. With this Width you can limit the content to the current visible Width of the GridView (Or you can set it to an absolute value like 500).
And finally a preview of this Column
OK, the fact that the expander is not stretchable is because of the non stretchable parent control. You have a column 'Name' in your gridview with a fixed width and a expander added as a child. As far as i know the child control cannot extend beyond the parent control if this is not truth im sure someone will correct this. I don't know what the best way is to achieve your goal but to give you some inspiration i made a small example.
So, to give you a example if how this could work:
Edit: You can just set negative margins on your expander like so:
<Expander ToolTip="Expand" ExpandDirection="Down" Margin="-100,0,-300,0" Foreground="Black" VerticalAlignment="Top">
Thanks to #LittleBit for this tip.
<ListView x:Name="lsttest" ItemsSource="{Binding persons}">
<ListViewItem>
<StackPanel>
<ListView>
<ListView.View>
<GridView>
<GridViewColumn Header="#1" Width="50">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"
Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Test 2" Width="50">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"
Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black" VerticalAlignment="Top">
<Expander.Header>
<TextBlock Text="{Binding Model.Name, Mode=OneWay}"
HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}"
TextAlignment="Left" Margin="5" TextWrapping="Wrap" VerticalAlignment="Top" />
</Expander.Header>
<GroupBox Header="Description" FontWeight="Bold" Width="{Binding ActualWidth, ElementName=lsttest}">
<TextBlock Text="{Binding Name, Mode=OneWay}" TextWrapping="Wrap"
FontWeight="Normal" TextAlignment="Left" Margin="5" />
</GroupBox>
</Expander>
</StackPanel>
</ListViewItem>
</ListView>
The result:

MVVM WPF Interface freezes when setting the ItemsSource collection in async method

I have a problem with a ListView. When the ObservableCollection that is the ItemsSource is set, the application freezes for a few seconds.
This is the list view:
<UserControl.Resources>
<CollectionViewSource x:Key="Sets" Source="{Binding Path=Entries}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="DailySet.WeeklySet" />
<PropertyGroupDescription PropertyName="DailySet" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
<utilities:InvertableBooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</UserControl.Resources>
<ListView ItemsSource="{Binding IsAsync=True, UpdateSourceTrigger=PropertyChanged}" DataContext="{StaticResource Sets}" >
<ListView.View >
<GridView >
<GridViewColumn DisplayMemberBinding="{Binding StartTimeFormatted}" Header="Start" Width="60" />
<GridViewColumn DisplayMemberBinding="{Binding EndTimeFormatted}" Header="End" Width="60" />
<GridViewColumn DisplayMemberBinding="{Binding TotalHoursFormatted}" Header="Time" Width="80" />
<GridViewColumn DisplayMemberBinding="{Binding CostCode}" Header="CostCode" Width="120" />
<GridViewColumn DisplayMemberBinding="{Binding Operation}" Header="Operation" Width="160" />
<GridViewColumn DisplayMemberBinding="{Binding Comment}" Header="Comment" >
<GridViewColumn.Width>
<MultiBinding Converter="{StaticResource LastColumnMaximizerConverter}">
<Binding Path="ActualWidth"
RelativeSource="{RelativeSource AncestorType=ListView}"/>
<Binding Path="View.Columns"
RelativeSource="{RelativeSource AncestorType=ListView}"/>
</MultiBinding>
</GridViewColumn.Width>
</GridViewColumn>
<GridViewColumn Header="Action" Width="60">
<GridViewColumn.CellTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" >
<Button IsEnabled="{Binding ElementName=thisUc, Path=DataContext.EditingAllowed}"
BorderThickness="0" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" ToolTip="Edit this entry"
Command="{Binding ElementName=thisUc, Path=DataContext.EditEntryCommand}" CommandParameter="{Binding}">
<Button.Content>
<Image Height="18" Width="20" Source="pack://application:,,,/Gfx/edit.png"></Image>
</Button.Content>
</Button>
<Button IsEnabled="{Binding ElementName=thisUc, Path=DataContext.EditingAllowed}" BorderThickness="0" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" ToolTip="Delete this entry"
Command="{Binding ElementName=thisUc, Path=DataContext.DeleteEntryCommand}" CommandParameter="{Binding}">
<Button.Content>
<Image Height="18" Width="20" Source="pack://application:,,,/Gfx/delete.png"></Image>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="{Binding Path=Name.IsWeekOpen, Mode=OneWay}" >
<Expander.Header>
... header label definition
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="10,0,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="False" BorderBrush="#FFA4B97F"
BorderThickness="0,0,0,1" IsEnabled="{Binding Path=Name.DayDetailsGroupingHeader.RealEntriesAvailable}">
<Expander.Header>
... header label definition
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
This is the method that populates the entries list:
public override async Task LoadLiveData()
{
IEnumerable<DailyDetailedInfo> details = await this.Connector.GetDetails();
List<DailyDetailEntry> entries = this.Mapper.Map<IEnumerable<DailyDetailedInfo>, IEnumerable<DailyDetailEntry>>(details).ToList();
//up to this point the execution takes ~300-500 miliseconds
this.Entries = new ObservableCollection<DailyDetailEntry>(entries.OrderBy(x => x.ExtractedStartDate));
// collection assigning takes few miliseconds as well
//this.Entries = new ObservableCollection<DailyDetailEntry>(); when empty collection is assigned, the UI is not frozen, even though the Connector.GetDetails() is called
}
I am sure that there are no CPU bound operations, and the problem only happens when the this.Entries collection is assigned.
I tried replacing the this.Entries assignment with an empty collection and it works fine in such case.
I also tried adding items one by one, but no change:
foreach (DailyDetailEntry dailyDetailEntry in entries.OrderBy(x => x.ExtractedStartDate))
{
this.Entries.Add(dailyDetailEntry);
}
What should I do to make the UI responsive?

WPF GridViewRowPresenter turns all the content into Textblocks

I'm trying to create a list with fully functional headers, but I can only seem to get either a list with functional headers and all list view items reduced to textblocks. OR a list view with all the buttons and text fully styled, but without the headers being properly linked. See the image below;
My ListView definition looks like this for both of them:
<ListView ItemsSource="{Binding ScenarioComponents}" Style="{StaticResource ListViewWithHeader}" ItemContainerStyle="{StaticResource ListViewWithHeaderItem}">
<ListView.View>
<GridView>
<GridViewColumn Width="Auto" Header="{Binding NameHeader}" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Width="Auto" Header="{Binding TypeHeader}" DisplayMemberBinding="{Binding Type}"/>
<GridViewColumn Width="Auto" Header="{Binding InfoHeader}"/>
<GridViewColumn Width="Auto" Header="{Binding ExportHeader}"/>
<GridViewColumn Width="Auto" Header="{Binding DeleteHeader}"/>
</GridView>
</ListView.View>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Name}" HorizontalAlignment="Left"/>
<Label Grid.Column="1" Content="{Binding Type}" Background="{StaticResource XVROrange}"/>
<Button Grid.Column="2" Style="{StaticResource BorderLessButton}" Command="{Binding MoreInfoCommand}">
<Button.Content>
<Image Source="/Views/Images/cc2_gui_information_default.png"/>
</Button.Content>
</Button>
<Button Grid.Column="3" Style="{StaticResource BorderLessButton}" Command="{Binding ExportCommand}">
<Button.Content>
<Image Source="/Views/Images/cc2_gui_export_default.png"/>
</Button.Content>
</Button>
<Button Grid.Column="4" Style="{StaticResource BorderLessButton}" Command="{Binding DeleteCommand}">
<Button.Content>
<Image Source="/Views/Images/cc2_gui_b_delete.png"/>
</Button.Content>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And the only difference in the styling is that the one with the Headers working uses a GridViewRowPresenter in the ListViewItem like this:
<Style x:Key="ListViewWithHeaderItem" TargetType="ListViewItem">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="Border" Padding="0" Background="Transparent" BorderBrush="{StaticResource XVR70}" BorderThickness="1">
<GridViewRowPresenter Content="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the second one uses the same styling only with a ContentPresenter instead of the GridViewRowPresenter without any embellishments.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Background="Transparent" BorderBrush="{StaticResource Black47}" BorderThickness="0,0,0,0">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
For some reason using the GridViewRowPresenter means every item in my ListView.ItemTemplate's DataTemplate gets turned into a Textblock. And I can't figure out why. I'd really prefer to keep using the GridViewRowPresenter though as this means the headers are bound to the items in the list and scale with them and everything.
Has anyone got any idea how I can style this to work?
Can you put your templates from the ItemTemplate into the GridViewColumns?
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Width="Auto" Header="{Binding NameHeader}" DisplayMemberBinding="{Binding Name}">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Label Grid.Column="0" Content="{Binding Name}" HorizontalAlignment="Left"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!-- more columns -->
</GridView.Columns>
</GridView>
</ListView.View>

Place Popup control on a cell of a ListView

I have a listview and will like to display more info on a popup when a button is pressed. Anyways my listview looks like:
<ListView Name="TableListView">
<ListView.View>
<GridView>
<GridViewColumn Width="50"
Header="ID">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Label Content="{Binding Id}"
HorizontalAlignment="Center" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<!-- I am having trouble with this column! -->
<GridViewColumn Width="50"
Header="ID">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<Button Content="Click to show more Info">
<Button.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="PopupSelectFile"
Property="IsOpen"
Value="True">
</Setter>
</Trigger>
</Button.Triggers>
</Button>
<Popup x:Name="PopupSelectFile">
<Button Width="100"
Height="100"></Button>
</Popup>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
basically I want to show a popup (PopupSelectFile) when the button on the second column is clicked.
<ToggleButton x:Name="theButton">
...
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=theButton">
...
</Popup>

Categories

Resources