I'm having trouble drawing a listview with columns that are left or centre aligned. I've looked at a few of solutions that I've found on here or other forums but they either seem to work for all columns or I can't get them working.
The best I've got so far is this code, but everything is left aligned (I've put the right-aligns in to test the code). Can someone tell me where I'm going wrong please?
<ListView Name="lsvQuestions" DockPanel.Dock="Bottom">
<ListView.View>
<GridView>
<GridViewColumn Width="450" Header="Question Text">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding QuestionText}" TextAlignment="Left"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="200" Header="Type">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding QuestionType}" TextAlignment="Right"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="100" Header="Page Number">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding QuestionPageNumber}" TextAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="100" Header="Order">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding QuestionOrder}" TextAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Your ListViewItems don't stretch the content by default and that's why all items appear on the left. Add this and it will work:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
Although LPL's hint had already saved thousands of headaches, I would go even further and define HorizontalContentAlignment and VerticalContentAlignment to stretch in order to target an expected alignment behaviours on most used table driven controls:
ListView column headers and items templates
DataGrid column headers and cell templates.
<Window x:Class="TaskManager.UI.Views.AcumuladosPorTarefaWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:v="clr-namespace:TaskManager.UI.Views"
xmlns:catel="http://catel.codeplex.com"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="AcumuladosPorTarefaWindow" Height="451.533" Width="323.305"
>
<Window.Resources>
<Style TargetType="GridViewColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
<Style TargetType="DataGridCell">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</Window.Resources>
<StackPanel Orientation="Vertical">
<ListView ItemsSource="{Binding AcumuladosPorTarefa}" SelectedItem="{Binding LinhaSelecionada}">
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding TarefaID}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
<GridViewColumnHeader>
<TextBlock Text="ID" TextAlignment="Center" />
</GridViewColumnHeader>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Tarefa.Nome}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
<TextBlock Text="Nome" TextAlignment="Left"/>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding DuracaoInMS}" TextAlignment="Right" HorizontalAlignment="Stretch" />
</DataTemplate>
</GridViewColumn.CellTemplate>
<GridViewColumnHeader Width="auto">
<TextBlock Text="Duração" TextAlignment="Right"/>
</GridViewColumnHeader>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<DataGrid ItemsSource="{Binding AcumuladosPorTarefa}" AutoGenerateColumns="False" SelectedItem="{Binding LinhaSelecionada}" CanUserAddRows="False" HorizontalAlignment="Stretch">
<DataGrid.Columns>
<DataGridTemplateColumn Width="auto" MinWidth="20" CanUserSort="True" CanUserReorder="True" CanUserResize="True">
<DataGridTemplateColumn.Header>
<TextBlock Text="ID" TextAlignment="Right" />
</DataGridTemplateColumn.Header>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding TarefaID}" HorizontalAlignment="Stretch"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="auto" MinWidth="150" CanUserSort="True">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<TextBlock Text="Nome" HorizontalAlignment="Left"/>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Tarefa.Nome}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Duração" Width="auto" MinWidth="25" IsReadOnly="True">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<TextBlock Text="Duração" TextAlignment="Right"/>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding DuracaoInMS}" TextAlignment="Right" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</Window>
Rembember: you can always define your default styles and other resources at application level so you don't have to define it every view.
Hope it helps someone else like LPL's hint helped me.
Related
I have 2 listViews as shown below.
When I select an item in the first listView it gets Highlighted, but when I select an item in the second listView, the first selected item from the first listView losses its highlightning. I dont want this to happen, I want both items to be highlighted. Any help?
<ListView x:Name="listViewDevice" ItemsSource="{Binding NotMappedInputAttributes}" KeyboardNavigation.TabIndex="6" SelectedItem="{Binding SelectedInputAttribute}" Grid.Column="2" Margin="5,27,5,32" Grid.Row="1" Grid.ColumnSpan="2">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="150">
<GridViewColumn.CellTemplate>
<HierarchicalDataTemplate>
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Type" Width="150">
<GridViewColumn.CellTemplate>
<HierarchicalDataTemplate>
<TextBlock Text="{Binding TypeName}"/>
</HierarchicalDataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Device" Width="150">
<GridViewColumn.CellTemplate>
<HierarchicalDataTemplate>
<TextBlock Text="{Binding HostDevice.SimulationMemberName}"/>
</HierarchicalDataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<TextBox x:Name="textBox" Text="{Binding SearchColumns, UpdateSourceTrigger=PropertyChanged}" Margin="5,0" TextWrapping="Wrap" Height="22" VerticalAlignment="Top" KeyboardNavigation.TabIndex="0" Grid.Row="1" />
<TextBox x:Name="textBox_Copy" Text="{Binding SearchInputAttributes, UpdateSourceTrigger=PropertyChanged}" KeyboardNavigation.TabIndex="5" Margin="5,0" TextWrapping="Wrap" Grid.Column="2" Height="22" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2"/>
<ListView x:Name="treeViewCsvFiles" KeyboardNavigation.TabIndex="1" ItemsSource="{Binding CsvColumns}" VirtualizingPanel.IsVirtualizing="True" Margin="5,27,5,32" SelectedItem="{Binding SelectedCsvColumn}" Grid.Row="1">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn Header="Name">
<GridViewColumn.CellTemplate>
<HierarchicalDataTemplate>
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="File">
<GridViewColumn.CellTemplate>
<HierarchicalDataTemplate>
<TextBlock Text="{Binding File.Name}"/>
</HierarchicalDataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Time Column">
<GridViewColumn.CellTemplate>
<HierarchicalDataTemplate>
<CheckBox IsChecked="{Binding IsTimeColumn, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center"/>
</HierarchicalDataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
I would recommend you to see this answer and this other answer. Some people had the same problem as you have now.
I have created a gridview that displays as shown below:
What I would like to do is have the header height stretch as needed to fit the rotated text, how can I do this? Something like the below mockup (Note: obviously the rotated text won't be truncated)
Also as in the second mockup, I would like to have the rotated text a bit closer together. When you compare with the first image which seems to have the distance between each set by the width of the textblock. What is the best approach to get them closer?
Here is my XAML:
<UserControl.Resources>
<DataTemplate x:Key="headerTemplate">
<TextBlock HorizontalAlignment="Left" Text="{Binding}"/>
</DataTemplate>
<Style x:Key="GridHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
</Style>
<Style x:Key="ColumnHeaderStyle" TargetType="GridViewColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
</Style>
<Style x:Key="rotatedText" TargetType="TextBlock">
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<GridView>
<GridViewColumn Header="Name" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Name}"/>
<GridViewColumn Header="Job Title" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Job_Title}" />
<GridViewColumn Header="Department" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Department}" />
<GridViewColumn Header="Company" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Company}" />
<GridViewColumn DisplayMemberBinding="{Binding Path=Company}">
<GridViewColumn.Header>
<StackPanel Orientation="Vertical">
<TextBlock HorizontalAlignment="Center">Modules</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource rotatedText}" >Customer Services</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Asset Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Works Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Project Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Rates Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Finance</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Human Resources</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Document Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >User Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Configuration</TextBlock>
</StackPanel>
</StackPanel>
</GridViewColumn.Header>
</GridViewColumn>
</GridView>
Use LayoutTransform instead of RenderTransform. That will solve your problem.
<Style x:Key="rotatedText" TargetType="TextBlock">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
</Style>
I included everything below since it's not that much. I wasn't sure if something I put elsewhere was causing my setter to not work properly.
<ListView x:Name="lvReports"
SelectionMode="Single"
ItemsSource="{Binding reportsCollection}" Height="432" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListView.Resources>
<Style x:Key="myHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="TextElement.FontSize" Value="30pt"/>
<Setter Property="Width" Value="800"/>
</Style>
</ListView.Resources>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<DockPanel>
<DockPanel Height="30" VerticalAlignment="Bottom">
<Image Source="\Images\ProductivityByEmployeesReport.png"/>
<TextBlock FontWeight="Bold" FontSize="18pt" Text="{Binding Path=Name}"/>
</DockPanel>
</DockPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.View>
<GridView>
<GridViewColumn x:Name="colName" HeaderContainerStyle="{StaticResource myHeaderStyle}" Header="Reports">
<GridViewColumn.CellTemplate>
<DataTemplate>
<DockPanel>
<Rectangle Width="18"/>
<CheckBox>
<TextBlock Text="{Binding displayName}"/>
</CheckBox>
</DockPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Thanks in advance.
Add this to <ListView.Resources>
<Style TargetType="GridViewColumnHeader" x:Key="ColumnHeaderLarge">
<Setter Property="FontSize" Value="14"/>
</Style>
To set Fontsize to 14, use the style as:
<GridView ColumnHeaderContainerStyle="{StaticResource ColumnHeaderLarge}">
I want to use the same style in many listviews. And in my style i have defined the gridview columns also.
But when i try to run, it throws an exception:
View can't be shared by more than one
ListView.
How can i solve this?
XAML:
<Style x:Key="articleList" TargetType="{x:Type ListView}">
<Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"/>
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="True"/>
<Setter Property="ListView.ItemsSource" Value="{Binding}"/>
<Setter Property="ListView.View">
<Setter.Value>
<GridView>
<GridViewColumn Header="Subject" Width="300">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Subject}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Size" Width="75">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding SizeFormatted}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Poster" Width="175">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Poster}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Age" Width="75">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding AgeFormatted}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</Setter.Value>
</Setter>
Add the x:Shared property to your GridView resource. Check out the GridView resource in this example.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Window.Resources>
<GridView x:Key="ViewBase1" x:Shared="False">
<GridViewColumn Header="Blah1" Width="70"/>
<GridViewColumn Header="Blah2" Width="70"/>
<GridViewColumn Header="Blah3" Width="70"/>
</GridView>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ListView Margin="0,0,0,120" View="{DynamicResource ViewBase1}" />
<ListView Margin="272,0,91,120" View="{DynamicResource ViewBase1}" />
</Grid>
</Window>
I have a ListView that I want to group results into, however the examples I am finding are not working. How can I group my results?
I want to group on the Status property of a custom object.
This is what I have:
<ListView IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Background="Transparent" SelectionChanged="ListView_SelectionChanged"
Name="lstShelvedOrders">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontWeight="Bold" FontSize="15"
Text="{Binding Path=Status}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Width" Value="Auto" />
<Setter Property="FontSize" Value="10.4" />
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Path=Number}" Header="Shelve ID" />
<GridViewColumn DisplayMemberBinding="{Binding Path=Customer}" Header="Customer" />
<GridViewColumn DisplayMemberBinding="{Binding Path=PurchaseOrderNo}" Header="PO Number" />
<GridViewColumn DisplayMemberBinding="{Binding Path=SubmittedBy}" Header="Shelved By" />
<GridViewColumn DisplayMemberBinding="{Binding Path=OrderDate, StringFormat=MMM dd\, yyyy}" Header="Date" />
<GridViewColumn DisplayMemberBinding="{Binding Path=CustomerTerms.Description}" Header="Order Terms" />
<GridViewColumn DisplayMemberBinding="{Binding Path=ShippingMethod.Description}" Header="Shipping" />
<GridViewColumn DisplayMemberBinding="{Binding Path=TotalPrice, StringFormat=c}" Header="Order Total" />
</GridView>
</ListView.View>
</ListView>
And this is the code that I have:
void ShelvedOrderList_DataContextChanged(object sender, System.Windows.DependencyPropertyChangedEventArgs e)
{
AddGrouping();
}
private void AddGrouping()
{
if ( lstShelvedOrders.ItemsSource == null)
{
return;
}
CollectionView myView = (CollectionView)CollectionViewSource.GetDefaultView(lstShelvedOrders.ItemsSource);
PropertyGroupDescription groupDescription = new PropertyGroupDescription("Status");
myView.GroupDescriptions.Add(groupDescription);
}
I notice one thing right away - the GroupStyle.HeaderTemplate will be applied to a CollectionViewGroup, so your DataTemplate should probably look like this:
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="15" FontWeight="Bold" Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
CollectionViewGroup.Name will be assigned the value of Status for that group.
I think this can also be better, using a GroupStyle with a new ControlTemplate:
<ListView ItemsSource="{Binding Path=ContactsView}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template" Value="{StaticResource ContactsGroupItemTemplate}" />
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
...
<ControlTemplate TargetType="{x:Type GroupItem}" x:Key="ContactsGroupItemTemplate">
<Expander IsExpanded="False">
<Expander.Header>
<DockPanel>
<TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100"/>
<TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount}"/>
<TextBlock FontWeight="Bold" Text=" Items"/>
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>