I want the information in GridViewColumn "from" aligned to the right.
This is what I have done and its not working:
<ListView ItemsSource="{Binding VolumeNumber}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header="SomeStatus" DisplayMemberBinding="{Binding Name}" Width="170" />
<GridViewColumn Header="from" DisplayMemberBinding="{Binding Value, StringFormat=0.000000}" Width="170 >
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextAlignment="Right" Width="40"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
If you want just one specific column aligned to the right try the example on
https://msdn.microsoft.com/en-us/library/bb961985.aspx
Here's my implementation
<Window.Resources>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</Window.Resources>
<Grid>
<ListView ItemsSource="{Binding VolumeNumber}">
<ListView.View>
<GridView>
<GridViewColumn Header="SomeStatus" DisplayMemberBinding="{Binding Name}" Width="170"/>
<GridViewColumn Header="from" Width="170">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value}" TextAlignment="Right" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Window>
Now DON'T SET DisplayMemberBinding="{Binding Value}" in the GridViewColumn declaration, you need to set it in the textblock Otherwise it will ignore your celltemplate
To change the alignment of the column, you need to specify that the HorizontalContentAlignment property of each ListViewItem is Stretch, so that the elements in each ListViewItem can span or be positioned along the entire width of each column. Because the ListView is bound to a data source, you need to create a style that sets the HorizontalContentAlignment. Next, you need to use a DataTemplate to display the content instead of using the DisplayMemberBinding property. To display the Value of each template, the DataTemplate can just contain a TextBlock that has its HorizontalAlignment property set to Right.
The following example defines the style and DataTemplate necessary to make the column right-aligned, and changes the GridViewColumn to reference the DataTemplate.
The problem here is the ListViewItem (i.e. the container of each GridViewColumn cell).
You have to set its property HorizontalContentAlignment to Stretch.
Have a look here (you also need to remove the DisplayMemberBinding if you want to use a DataTemplate):
<ListView ItemsSource="{Binding VolumeNumber}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header="SomeStatus" DisplayMemberBinding="{Binding Name}" Width="170" />
<GridViewColumn Header="from" Width="170">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value, StringFormat=0.000000}" TextAlignment="Right" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Related
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>
To preface the bulk of the question, I've found several answers regarding CellTemplate and DataTemplate, as well as one setting HeaderContainerStyle, and none of them worked; results ranged from no change to a crash.
I'm trying to change the color of the first entry in each column for my listview (basically so the header for each column sticks out). Here's the most recent thing I've tried with no success. Any suggestions or advice are greatly appreciated.
<ListView Height="380" VerticalAlignment="Top" HorizontalContentAlignment="Stretch">
<ListView.View>
<GridView>
<GridViewColumn Header="First" Width="60" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock x:Name="Txt" Text="{Binding First}" Background="DarkBlue"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Last" Width="60" DisplayMemberBinding="{Binding Last}" />
<GridViewColumn Header="Group" Width="80" DisplayMemberBinding="{Binding Group}" />
</GridView>
</ListView.View>
</ListView>
Is the following code what you are looking for?
For the first row:
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock x:Name="Txt" Text="{Binding First}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter TargetName="Txt" Property="Background" Value="DarkBlue"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</GridViewColumn.CellTemplate>
For the header:
<GridViewColumn Header="First" Width="60" >
<GridViewColumn.HeaderContainerStyle>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Background" Value="LightSkyBlue"/>
</Style>
</GridViewColumn.HeaderContainerStyle>
</GridViewColumn>
How do I insert a horizontal line after each list view item in a grid?
<Grid>
<ListView Margin="10" Name="Users">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="300">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" TextTrimming="WordEllipsis" Height="32" Text="{Binding Name}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Age" Width="200">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" TextTrimming="WordEllipsis" Height="32" Text="{Binding Age}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
I tried defining Border after DataTemplate
<DataTemplate>
<Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue">
but that only added a border around each of the data template items. How do I insert a horizontal separator after each row?
I think you ought to be able to set a row style via the ItemContainerStyle:
https://stackoverflow.com/a/4474474/424129
You'd want to set a BorderThickness="0,0,0,1" to have only a bottom border.
I am having a listview and using view as gridview as follows:
<ListView Grid.Row="1" Grid.Column="0" Height="100" HorizontalAlignment="Left" Margin="10,10,10,10" Name="listView2" VerticalAlignment="Top" Width="300" ItemsSource="{Binding}" SelectionChanged="listView2_SelectionChanged" SelectionMode="Multiple">
<ListView.View>
<GridView AllowsColumnReorder="True">
<GridViewColumn Header="Select">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>
<GridViewColumn DisplayMemberBinding="{Binding Path=LastName}" Header="Last Name" Width="100"/>
</GridView>
</ListView.View>
</ListView>
Now the issue is that when the user will check on the checkbox the record should get selected. Also is the user selects the record from the list then the corresponding checkboxes should be selected.
How to do it ?
I'm assuming that your view model has IsSelected property:
public Boolean IsSelected
{
get { return isSelected; }
set
{
if (isSelected != value)
{
isSelected = value;
OnPropertyChanged("IsSelected");
}
}
}
private Boolean isSelected;
So, let's change markup:
<ListView ItemsSource="{Binding}" SelectionMode="Multiple">
<!-- add style for the item in list view: -->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView AllowsColumnReorder="True">
<GridViewColumn Header="Select">
<GridViewColumn.CellTemplate>
<DataTemplate>
<!-- bind the checkbox to the IsSelected property: -->
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Name}" Header="Name" Width="100"/>
</GridView>
</ListView.View>
</ListView>
The simplest ways:
<GridViewColumn Header="None">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox Width="50"
Height="50"
IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}},
Path=IsSelected,Mode=TwoWay}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
I wrote XAML as follows:
<UserControl.Resources>
<GridViewColumnCollection x:Key="gvcc">
<GridViewColumn Header="Klient"
DisplayMemberBinding="{Binding CustomerName}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Budżet"
DisplayMemberBinding="{Binding Budget, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Zysk. zakł."
DisplayMemberBinding="{Binding ExpectedProfability, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Zysk. real."
DisplayMemberBinding="{Binding RealProfability, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Miejsce"
DisplayMemberBinding="{Binding Place}"
Width="80" />
<GridViewColumn Header="Nr proj."
DisplayMemberBinding="{Binding Number}"
Width="80">
</GridViewColumn>
</GridViewColumnCollection>
</UserControl.Resources>
...
<Grid>
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Visible">
<ItemsControl ItemsSource="{Binding GroupedProjects}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" >
<TextBlock FontSize="13" Text="{Binding Month}" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<GridViewHeaderRowPresenter Name="hrp" Columns="{StaticResource gvcc}" Grid.Column="1" Grid.Row="0" />
<ListBox ItemsSource="{Binding Details}" Grid.Column="1" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Disabled"
GotFocus="ListBox_GotFocus"
PreviewMouseWheel="ListBox_PreviewMouseWheel"
SelectedItem="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.SelectedProject}">
<ListBox.ItemTemplate>
<DataTemplate>
<GridViewRowPresenter Columns="{StaticResource gvcc}" Height="24" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- HERE IS THE PROBLEM -->
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
Data are grouped in the ListBox, underneath the ListBox I want to display something like a summary row. I wanted to do this row as the StackPanel with TextBlock controls. The problem is - how to relate the width of the TextBox controls with the widths of columns in the ListBox.
Let's say the "summary row" is something like that:
<StackPanel Orientation="Horizontal">
<TextBlock Width="bind to ListBox.Column1.Width + ListBox.Column2.Width">some data</TextBlock>
<TextBlock Width="bind to ListBox.Column3.Width">other data</TextBlock>
<TextBlock Width="bind to ListBox.Column4.Width">etc.</TextBlock>
</StackPanel>
As you can see - first TextBlock width is something like "ColumnSpan = 2". The width of the other TextBlocks is simply the width of a column to which I would like to pair them.
Is such a thing is even possible in XAML? Can anyone of you knows how to implement a similar solution in different way?
If you are doing this through MVVM, you can easily use property binding to get it done. Just set the width of each of the ListBox columns to properties in your ViewModel. The textBox controls widths will be bound to a seperate readonly property which takes the appropriate widths, manipulates them in some way, and returns a value. You will have to implement INotifyPropertyChanged and call it on each of the textbox width properties every time a listboxwidth property is changed.
So something like so:
Private _Column1Width As Double
Public Property Column1Width() As Double
Get
Return _Column1Width
End Get
Set(ByVal value As Double)
_Column1Width = value
OnPropertyChanged("TextBox1Width")
End Set
End Property
Private _Column2Width As Double
Public Property Column2Width() As Double
Get
Return _Column2Width
End Get
Set(ByVal value As Double)
_Column2Width = value
OnPropertyChanged("TextBox1Width")
End Set
End Property
Public ReadOnly Property TextBox1Width() As Double
Get
Return Column1Width + (Column2Width * 2)
End Get
End Property
And bindings like so:
<GridViewColumnCollection x:Key="gvcc">
<GridViewColumn Header="Klient"
DisplayMemberBinding="{Binding CustomerName}"
Width="{Binding Column1Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"}">
</GridViewColumn>
<GridViewColumn Header="Budżet"
DisplayMemberBinding="{Binding Budget, StringFormat={}{0:C}}"
Width="{Binding Column2Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
</GridViewColumn>
<GridViewColumn Header="Zysk. zakł."
DisplayMemberBinding="{Binding ExpectedProfability, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Zysk. real."
DisplayMemberBinding="{Binding RealProfability, StringFormat={}{0:C}}"
Width="80">
</GridViewColumn>
<GridViewColumn Header="Miejsce"
DisplayMemberBinding="{Binding Place}"
Width="80" />
<GridViewColumn Header="Nr proj."
DisplayMemberBinding="{Binding Number}"
Width="80">
</GridViewColumn>
</GridViewColumnCollection>
<TextBlock Width="{Binding TextBox1Width}">some data</TextBlock>
Everything resizes just as it should continuously updating as you resize the columns.