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>
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 want to change the Color of a Listview Row in XAML when I:
Have the Cursor over it
Have the Row selected
I tried many different Solutions I found here in the Forum and also on other websides, but I never found a solution that really changed any of the Color. I just get it to Change the text Color when I select a Item but thats not what I want.
Maybe someone can help me, this is my XAML Listview:
<ListView ItemsSource="{Binding Files}" x:Name="listBox2" Margin="269,32,10.286,0" Height="119" VerticalAlignment="Top" Drop="DropEvent" AllowDrop="True">
<ListView.View>
<GridView>
<GridViewColumn
DisplayMemberBinding="{Binding Path}"
Width ="1000"/>
</GridView>
</ListView.View>
</ListView>
</ListView>
You could define an ItemContainerStyle:
<ListView ItemsSource="{Binding Files}" x:Name="listBox2">
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding}" Width="1000"/>
</GridView>
</ListView.View>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Hi please keep in mind I am new with WPF, I am using a WebService that returns a gridlist[] and it automatically populate my Gridview. here is the WebService:
C#:
WebService.Contacts Contact = new WebService.Contacts();
grdGetGroup.ItemsSource = Contact.GetGroups(Username, Password);
Here is my XAML:
<ListView x:Name="grdGetGroup"
Margin="560,34,128,48"
FontSize="13"
BorderBrush="#FFF01F1F"
Foreground="#FFF01F1F"
SelectedIndex="1"
FontFamily="/WPF Working Experimenet;component/Font/#B Nazanin">
<ListView.View>
<GridView>
<GridViewColumn x:Name="GridID"
Header="ID"
Width="50"
DisplayMemberBinding="{Binding GroupID}"
FrameworkElement.FlowDirection="RightToLeft" />
<GridViewColumn Header="Group Name"
Width="85
"
DisplayMemberBinding="{Binding GroupName}"
FrameworkElement.FlowDirection="RightToLeft" />
<GridViewColumn Header="Numbers"
Width="60"
DisplayMemberBinding="{Binding ContactCount}"
FrameworkElement.FlowDirection="RightToLeft" />
<GridViewColumn Header="Access"
Width="60"
DisplayMemberBinding="{Binding ShowToChild}"
FrameworkElement.FlowDirection="RightToLeft" />
<GridViewColumn Header="Description"
Width="150"
DisplayMemberBinding="{Binding GroupDescription}"
FrameworkElement.FlowDirection="RightToLeft" />
<GridViewColumn Header=""
Width="60"
FrameworkElement.FlowDirection="RightToLeft">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<Button x:Name="btnChangeGroup"
Margin="5"
Content="Change"
Cursor="Hand"
Click="btnChangeGroup_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline">
<ContentPresenter /></TextBlock>
</ControlTemplate>
</Button.Template>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground"
Value="Black" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Foreground"
Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header=""
Width="60"
FrameworkElement.FlowDirection="RightToLeft">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<Button x:Name="btnRemoveGroup"
Margin="5"
Content="Remove"
Cursor="Hand"
Click="btnRemoveGroup_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline">
<ContentPresenter /></TextBlock>
</ControlTemplate>
</Button.Template>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground"
Value="Black" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Foreground"
Value="#FFF01F1F" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
If you have noticed, I have 2 button for every row in Gridview which is built automatically as well, now here is my question how to extract the Data in GridviewColumn x:Name"GridID"? and pass it to the same row's Button Click Event (Which has a method that takes the Data has an input)
Valkyry,
If I undestand/guess right, on every line you ve got a gridList item.
If I undestand/guess right each gridList has a GroupID property.
Correct me if am wrong.
In WPF, in a DataGrid, each line has a DataContext property that holds the data of the line :
void btnRemoveGroup_Click( Object sender, EventArgs args)
{
var fxElt = sender as FrameworkElement;
var lineData = fxElt.DataContext as gridlist;
int groupID = lineData .GroupID;
}
Tell me it works or not. Regards
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.
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 ....
......................./>