I have a ListView which is having GridView as its View.
See the sample code below:
<ListView ItemsSource="{Binding Path=Employees}" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Focusable" Value="False"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<Style TargetType="{x:Type CheckBox}" x:Key="DataGridCheckBox">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="IsEnabled" Value="True" />
<Setter Property="Margin" Value="4" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type GridViewColumn}},Path=ActualWidth}" />
</Style>
</ListView.Resources>
<ListView.View>
<GridView x:Name="EmployeesGridView">
<GridViewColumn Header="IsEligible">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox Style="{StaticResource DataGridCheckBox}" IsChecked="{Binding Path=IsSelected}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Name" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock>
<TextBlock>
<TextBlock Text="{Binding Path=Employee.Name}"/>
</TextBlock>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Age">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Age}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
How can I export this data to CSV file. I am not getting any property by which I can get Rows present in GridView.
How can I do this. Please suggest.
You can create a SelectedPerson property in your ViewModel and bind ListView.SelectedItem to this property.
Related
I have a ListView with GridView content as below. I just add the delete and edit button to the end of each row. So i don't need the header for those columns. I collopsed the headers for those columns, this removes the headers but the place of the header of the columns looks like white as below. How to set the style for those columns as the header bar style ?
<Style x:Key="sahin" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</Style>
<ListView Grid.Row="3" ItemsSource="{Binding deckList}" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Header="Surname" Width="120" DisplayMemberBinding="{Binding SurName}" />
<GridViewColumn HeaderContainerStyle="{StaticResource sahin}" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Style="{StaticResource noBackgroundStyle}">
<Image Source="/KillCard;component/Resources/Images/delete.png" Width="16"></Image>
</Button>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn HeaderContainerStyle="{StaticResource sahin}">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Style="{StaticResource noBackgroundStyle}">
<Image Source="/KillCard;component/Resources/Images/edit.png" Width="16"></Image>
</Button>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
The code snippet shown below helped me.
<Style x:Key="sahin" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1" Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm using MVVM in a WPF application. I've a UserControl whose DataContext is set to a ViewModel. The UserControl is a table with 3 columns.
This is the following ListView/GridView:
<DockPanel>
<ListView DockPanel.Dock="Top" ItemsSource="{Binding Items}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ctrl:ListViewLayoutManager.Enabled="True">
<ListView.View>
<GridView>
<GridViewColumn Header="{Binding ColumnHeader1}"
CellTemplate="{StaticResource cellTemplateColumn1}">
<GridViewColumn.HeaderContainerStyle>
<Style BasedOn="{StaticResource {x:Type GridViewColumnHeader}}" TargetType="GridViewColumnHeader">
<Setter Property="TextBlock.TextAlignment" Value="{Binding Column1HAlignment}" />
</Style>
</GridViewColumn.HeaderContainerStyle>
</GridViewColumn>
<GridViewColumn Header="{Binding ColumnHeader2}"
CellTemplate="{StaticResource cellTemplateColumn2}">
<GridViewColumn.HeaderContainerStyle>
<Style BasedOn="{StaticResource {x:Type GridViewColumnHeader}}" TargetType="GridViewColumnHeader">
<Setter Property="TextBlock.TextAlignment" Value="{Binding Column2HAlignment}" />
</Style>
</GridViewColumn.HeaderContainerStyle>
</GridViewColumn>
<GridViewColumn Header="{Binding ColumnHeader3}"
CellTemplate="{StaticResource cellTemplateColumn3}"
ctrl:RangeColumn.IsFillColumn="True">
<GridViewColumn.HeaderContainerStyle>
<Style BasedOn="{StaticResource {x:Type GridViewColumnHeader}}" TargetType="GridViewColumnHeader">
<Setter Property="TextBlock.TextAlignment" Value="{Binding Column3HAlignment}" />
</Style>
</GridViewColumn.HeaderContainerStyle>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</DockPanel>
This is achieved by the following resources:
<Style TargetType="GridViewColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<TextBlock Text="{TemplateBinding Content}" Margin="5" Width="{TemplateBinding Width}">
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="14" />
</Style>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
<DataTemplate x:Key="cellTemplateColumn1">
<fa:ImageAwesome Icon="{Binding IconType}" Foreground="{Binding Status}" Width="10" />
</DataTemplate>
<DataTemplate x:Key="cellTemplateColumn2">
<TextBlock Text="{Binding SerialNumber, StringFormat='0'}" />
</DataTemplate>
<DataTemplate x:Key="cellTemplateColumn3">
<TextBlock Text="{Binding Action}" TextWrapping="Wrap" />
</DataTemplate>
The text alignments of each column is settable through the view model. I can do this easily for the headers:
<GridViewColumn.HeaderContainerStyle>
<Style BasedOn="{StaticResource {x:Type GridViewColumnHeader}}" TargetType="GridViewColumnHeader">
<Setter Property="TextBlock.TextAlignment" Value="{Binding Column1HAlignment}" />
</Style>
</GridViewColumn.HeaderContainerStyle>
But how can I pass the same parameter (Column1HAlignment) to align the cell's TextBlock contents?
Note the alignment of the 2nd column (where header is #) in the image above. The header is right aligned through data binding. I want the same binding for each cell content.
You could bind the HorizontalAlignment property of the element in the CellTemplate to the Column1HAlignment source property using a {RelativeSource}:
<DataTemplate x:Key="cellTemplateColumn2">
<TextBlock Text="{Binding SerialNumber, StringFormat='0'}"
HorizontalAlignment="{Binding DataContext.Column1HAlignment,
RelativeSource={RelativeSource AncestorType=ListView}}"/>
</DataTemplate>
I have a ListView that contains a GridView. I am trying to change both the background of an item that is selected, and the background of an item that is hovered over. After some searching, I came across the control template in conjunction with triggers, but they're not firing.
Here is a screenshot of what I mean
<ListView x:Name="TestListView" Margin="0,0.333,0.333,0" Grid.Row="1" Grid.Column="1" SelectedIndex="0" MouseDoubleClick="Song_List_DoubleClick" SelectionMode="Single" Background="#FF181818" Foreground="White" BorderBrush="#FF181818">
<ListView.View>
<GridView>
<GridViewColumn Header="A" Width="120" DisplayMemberBinding="{Binding A}" />
<GridViewColumn Header="B" Width="50" DisplayMemberBinding="{Binding B}" />
<GridViewColumn Header="C" Width="150" DisplayMemberBinding="{Binding C}" />
<GridViewColumn Header="D" Width="150" DisplayMemberBinding="{Binding D}" />
</GridView>
</ListView.View>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#282828"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#333333" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView>
Any help is much appreciated. Thanks!
You set ControlTemplate but don't have any child control to display data. And the style you need to modify is ListViewItem, not ListBoxItem.
You can do like this:
<ListView x:Name="TestListView" Margin="0,0.333,0.333,0" Grid.Row="1" Grid.Column="1" SelectedIndex="0" SelectionMode="Single" Background="#FF181818" Foreground="White" BorderBrush="#FF181818">
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridViewColumn Header="A" Width="120" DisplayMemberBinding="{Binding A}" />
<GridViewColumn Header="B" Width="50" DisplayMemberBinding="{Binding B}" />
<GridViewColumn Header="C" Width="150" DisplayMemberBinding="{Binding C}" />
<GridViewColumn Header="D" Width="150" DisplayMemberBinding="{Binding D}" />
</GridView>
</ListView.View>
</ListView>
I'm trying to get multiple lines in a listView I currently have the following XAML:
<ListView x:Name="listTasks" Margin="0,0,1.5,0" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0" Foreground="White" ItemsSource="{Binding TasksCollection}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="{x:Null}" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{x:Null}" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
</Trigger>
</Style.Triggers>
<Setter Property="Height" Value="50px" />
<Setter Property="Focusable" Value="false" />
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<Style x:Key="CustomHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</ListView.Resources>
<ListView.View>
<GridView ColumnHeaderContainerStyle="{DynamicResource CustomHeaderStyle}">
<GridViewColumn Header="">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock>
<TextBlock.Text>
<MultiBinding StringFormat=" Module: {0} Conditions: {1}|{2}|{3} for {4} minutes">
<Binding Path="Module"/>
<Binding Path="FirstValue"/>
<Binding Path="SecondValue"/>
<Binding Path="ThirdValue"/>
<Binding Path="Minutes"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
This outputs something like:
What I am trying to achieve is something like this (ignore the different colored background):
I can't seem to bring my head around how I would do this, any ideas?
Thanks
You can use a vertical StackPanel in order to put a series of TextBlock elements one on top of another:
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Module, StringFormat='Module: {0}'}"/>
<TextBlock Text="{Binding FirstValue, StringFormat='Module: {0}'}"/>
...
</StackPanel>
</DataTemplate>
Or you can format everything in one `TextBlock':
<DataTemplate>
<TextBlock>
<Run Text="Module: "/><Run Text="{Binding Module}"/><LineBreak/><Run Text="Conditions: "/><Run Text="{Binding FirstValue}"/><LineBreak/>
...
</TextBlock>
</DataTemplate>
I have array of class Person in ViewModel and I want to show their names in table. I have also column with checkboxes. This is my View part:
<ListView ItemsSource="{Binding Persons}">
<ListView.View>
<GridView>
<GridViewColumn Width="40">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox
.........................
.... some logic here ....
......................./>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="140"
Header="Name"
DisplayMemberBinding="{Binding Path=Name}" />
</GridView>
</ListView.View>
</ListView>
How can I show/hide checkboxes column according to value of IsSelectionAllowed boolean variable.
Use style:
<Style x:Key="CheckBoxStyle" TargetType="{x:Type Control}">
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelectionAllowed}" Value="False">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>
Attach with:
<CheckBox Style="{StaticResource CheckBoxStyle}"
.........................
.... some logic here ....
......................./>