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>
Related
I have a listview that uses GroupStyles where the ColumnHeaders are shown in each group. This works fine.
I would however like to hide the original ListView ColumnHeader (seen at the top of image) and just show Headers within the groups.
How can I separate them so it only show in the groups?
The GroupStyle:
<Style x:Key="GroupingSerialStyle" TargetType="{x:Type GroupItem}" BasedOn="{StaticResource GroupingBase}">
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate>
<Expander Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsExpanded="{Binding IsExpandedAll, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=OneTime}" Margin="2">
<Expander.Header>
<StackPanel Orientation = "Horizontal">
<TextBlock Text=" # "/>
<TextBlock Text = "{Binding Name}" />
</StackPanel>
</Expander.Header>
<StackPanel Orientation="Vertical">
<GridViewHeaderRowPresenter Visibility = "Visible" Margin="15,0,0,0"
DataContext="{Binding View, RelativeSource={RelativeSource FindAncestor,ListView,1}}"
Columns="{Binding Columns}"
ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyleABCD}"
ColumnHeaderTemplate="{Binding ColumnHeaderTemplate}"
ColumnHeaderTemplateSelector="{Binding ColumnHeaderTemplateSelector}"
AllowsColumnReorder="{Binding AllowsColumnReorder}"
ColumnHeaderContextMenu="{Binding ColumnHeaderContextMenu}"
ColumnHeaderToolTip="{Binding ColumnHeaderToolTip}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<ItemsPresenter Margin = "15,0,0,0" />
</StackPanel>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit: Further the column headers shall presented with custom colors for each column.
It can be solved through the ColumnHeaderContainerStyle. If you set an empty Template at GridView.ColumnHeaderContainerStyle and use your styled GridViewColumnHeaderStyleABCD for your GroupItem it should work.
I tried the following, that only displays column headers at the group items with customized Background.
<ListView BindingGroup="{Binding Name}" ItemsSource="{Binding Source={StaticResource TestItems}}">
<!-- ### custom coloring column headers ### -->
<ListView.Resources>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Background" Value="{Binding Path=Column.(YourNamespace:BgHelper.CustomBackground), RelativeSource={RelativeSource Self}}" />
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridView.ColumnHeaderContainerStyle>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<!-- Empty: ListViews header shows nothing -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ColumnHeaderContainerStyle>
<!-- ### custom coloring column headers ### -->
<GridViewColumn DisplayMemberBinding="{Binding Parameter0}" Header="Par0" YourNamespace:BgHelper.CustomBackground="Pink" />
<GridViewColumn DisplayMemberBinding="{Binding Parameter1}" Header="Par1" YourNamespace:BgHelper.CustomBackground="Green" />
</GridView>
</ListView.View>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Expander Margin="2">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text=" # " />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</Expander.Header>
<StackPanel Orientation="Vertical">
<GridViewHeaderRowPresenter Margin="15,0,0,0"
Columns="{Binding Columns}"
DataContext="{Binding View, RelativeSource={RelativeSource FindAncestor, ListView, 1}}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Visibility="Visible" />
<ItemsPresenter Margin="15,0,0,0" />
</StackPanel>
</Expander>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
To customize your column header colors you could use an AttachedProperty as follows:
namespace YourNamespace
{
public class BgHelper
{
#region Fields
public static DependencyProperty CustomBackgroundProperty =
DependencyProperty.RegisterAttached("CustomBackground",
typeof (SolidColorBrush),
typeof (BgHelper),
new FrameworkPropertyMetadata(new SolidColorBrush(Colors.Transparent)));
#endregion
#region Public Methods
public static SolidColorBrush GetCustomBackground(DependencyObject element)
{
return (SolidColorBrush) element.GetValue(CustomBackgroundProperty);
}
public static void SetCustomBackground(DependencyObject element, SolidColorBrush value)
{
element.SetValue(CustomBackgroundProperty, value);
}
#endregion
}
}
Then I extended my example above with setting the CustomBackground and using it at GridViewColumnHeader style. I marked the new/edited lines with comments.
#WPFGermany was correct. However, in my original question I forgot to add that for the headers within the GroupStyle I also needed to show different background colors for some of the column headings. I was able to get this to work by duplicating all of the columns in the GroupStyle and pointing each ColumnHeaderStyle to a unique color. Perhaps there is a better way but for now this works for me. Here is the partial GroupStyle to illustrate:
<Style x:Key="GroupingNcpCheckStyleRoot" TargetType="{x:Type GroupItem}" BasedOn="{StaticResource GroupingBaseRoot}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsExpanded="{Binding IsExpandedData, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=OneTime}" Margin="2">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<CheckBox x:Name="HeaderCheckBox" Margin="0,0,6,0" IsChecked="True"></CheckBox>
<TextBlock Text=" # "/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</Expander.Header>
<StackPanel Orientation="Vertical">
<GridViewHeaderRowPresenter Margin="15,0,0,0"
DataContext="{Binding View, RelativeSource={RelativeSource FindAncestor, ListView, 1}}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Visibility="Visible" >
<GridViewHeaderRowPresenter.Columns>
<!--NOTE: must explicitly create the collection-->
<GridViewColumnCollection>
<GridViewColumn Header=" " Width="60" >
<GridViewColumn.HeaderContainerStyle>
<Style TargetType="{x:Type GridViewColumnHeader}" BasedOn="{StaticResource GridViewColumnHeaderStyleTEST1}">
<Setter Property="Background" Value="{StaticResource TargetHeaderColor}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="-1,0,-1,0" />
</Style>
</GridViewColumn.HeaderContainerStyle>
<GridViewColumn.CellTemplate>
<DataTemplate >
<TextBlock HorizontalAlignment="Left" Text="{Binding Path=Id, StringFormat='# {0}'}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header=" Show " >
<GridViewColumn.HeaderContainerStyle>
<Style TargetType="{x:Type GridViewColumnHeader}" BasedOn="{StaticResource GridViewColumnHeaderStyleTEST1}">
<Setter Property="Background" Value="{StaticResource DifferentHeaderColor}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="-1,0,-1,0" />
</Style>
</GridViewColumn.HeaderContainerStyle>
<GridViewColumn.CellTemplate>
<DataTemplate >
<CheckBox IsChecked="{Binding Path=IncludeInReport}" HorizontalAlignment="center"></CheckBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
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 want to align the column headers to the left and the detail in the column to the right.
The header I get right, but the detail (textBlock) does not want to align to the right. Please help. Here is my code
<ListView HorizontalAlignment="Stretch"
ItemsSource="{Binding Trans}"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="5"
ScrollViewer.VerticalScrollBarVisibility="Auto"
MaxHeight="230">
<!--Align column header to the left-->
<ListView.Resources>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
</Style>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ListView.Resources>
<ListView.View>
<GridView ScrollViewer.HorizontalScrollBarVisibility="Auto">
<GridViewColumn Header="Amount" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Foreground="Black" HorizontalAlignment="Right" Text="{Binding Path=Amount, StringFormat=N2}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Please add the following attribute to text block and check
TextAlignment="Right"
to TextBlock node in Data template
Also if that didn't solve please try adding
Setter Property="HorizontalContentAlignment" Value="Right" to listview item Style
This should work,
<GridView ScrollViewer.HorizontalScrollBarVisibility="Auto">
<GridViewColumn Header="Amount" >
<GridViewColumn.CellTemplate >
<DataTemplate >
<StackPanel Width="200" >
<TextBlock Foreground="Black" TextAlignment="Right" Text="{Binding Path=Amount, StringFormat=N2}"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
Try to play with something like this :
<ListView Grid.IsSharedSizeScope="True">
<ListView.Resources>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
</Style>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalAlignment" Value="Stretch"/> <!-- Redundent -->
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridViewColumn Header="Amount" >
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
</Grid.ColumnDefinitions>
<TextBlock Foreground="Black" Background="AliceBlue" Text="{Binding}"/>
</Grid>
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
</Grid.ColumnDefinitions>
<TextBlock Foreground="Black" Background="AliceBlue" HorizontalAlignment="Right" Text="{Binding Path=Amount}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
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 ....
......................./>