ScrollHeader in ListView WPF - c#

In UWP we can use of ScrollHeader in ListView or GridView. I need like this ScrollHeader control in WPF Applications. What is the best way?
in UWP:
<Page xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" .../>
<ListView Name="listView" ItemsSource="{x:Bind _items, Mode=OneWay}">
<ListView.Header>
<controls:ScrollHeader Mode="Sticky">
<TextBlock Text="Scroll Header" />
</controls:ScrollHeader>
</ListView.Header>
</ListView>
<!-- or -->
<GridView Name="gridView" ItemsSource="{x:Bind _items, Mode=OneWay}">
<GridView.Header>
<controls:ScrollHeader Mode="Sticky">
<TextBlock Text="Scroll Header" />
</controls:ScrollHeader>
</GridView.Header>
</GridView>

I've tried and implemented the same this way.
<ListView Name="listView">
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.Header>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Width="50">
<TextBlock Text="This is a test text to go more than 50 width" ScrollViewer.CanContentScroll="True" />
</ScrollViewer>
</GridViewColumn.Header>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>

Related

Horizontal line after list view item in grid

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.

Enable field of a Listbox from combobox (C#-xaml)

I would like to enable or disable a field when a specific value in the combobox is selected:
In my xaml, I have a ListBox (ListToTransfert)wich is filled by dragging items from another Listbox (ListViewContents).
The ListToTransfert got 3 fields: Name, Gapand Time.
The field Namecannot be edited while the 2 others can be.
When the combobox has its value changed to Gapor to Time, I want the appropriate column to be enabled while the other one is disabled.
Here is the code of my XAML:
<!-- ListViewContents -->
<Label Content="Contents" Background="White" HorizontalContentAlignment="Center" HorizontalAlignment="Left" Margin="11,16,0,0" VerticalAlignment="Top" Width="400" Height="31"/>
<ListView Background="#bdc3c7" x:Name="ListViewContents" SelectionMode="Single" Margin="11,51.826,0,11" HorizontalAlignment="Left" Width="400">
<ListView.View>
<GridView >
<GridViewColumn Header="Name" Width="350" DisplayMemberBinding="{Binding Name}"/>
</GridView>
</ListView.View>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<command:EventToCommand Command="{Binding TransferContent}"
CommandParameter="{Binding SelectedItem, ElementName=ListViewContents}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Label Content="Label" Height="100" Width="100"/>
</ListView>
<!-- ListToTransfert -->
<TextBox Style="{StaticResource {x:Static ToolBar.TextBoxStyleKey}}"
HorizontalContentAlignment="Center"
HorizontalAlignment="Left" Margin="851,16,0,0"
VerticalAlignment="Top" Width="400" Height="31" Text="{Binding groupName}" />
<ListView Background="#bdc3c7" x:Name="ListToTransfert" ItemsSource="{Binding ContentsToTransfer}" HorizontalAlignment="Right" Width="400" Margin="0,51.826,21,11">
<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=Name}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Gap"></GridViewColumn>
<GridViewColumn Header="Time"></GridViewColumn>
</GridView>
</ListView.View>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<command:EventToCommand Command="{Binding DeleteContent}"
CommandParameter="{Binding SelectedItem, ElementName=ListToTransfert}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ListView>
My combobox is not yet created since i'm not sure if there is a solution for this problem, tho there is always one.
Can you propose me a XAML solution to do that?
This can be done either via a group of RadioButtons or a single ComboBox.
RadioButton
If you don't need to control this behavior from the view model, you can use the following :
<RadioButton x:Name="TimeRadioButton" Content="Time" />
<GridViewColumn Header="Gap">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<TextBlock IsEnabled="{Binding IsChecked, ElementName=GapRadioButton}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Alternatively, you can add EnableGapColumn/EnableTimeColumn on your view model. However, it would be better if you create an enum to define this behavior :
public enum TransfertViewType
{
Gap, Time
}
And change your bindings with EnumToBooleanConverter:
<!-- put this in a resource -->
<converter:EnumToBooleanConverter x:Key="EnumToBooleanConverter" />
<RadioButton Content="Time" IsChecked="{Binding ViewType, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static vm:YourViewModel.TransfertViewType}}"/>
<TextBlock IsEnabled="{Binding ViewType, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static vm:YourViewModel.TransfertViewType}}"/>
ComboBox
It would pretty much the same as the second part of RadioButton section, except that you will need to create an IEnumerable<TransfertViewType> as the ItemsSource for the ComboBox. Or, an IDictionary<TransfertViewType, string> if you like to customize the description a little bit.
<!-- for ienumerable -->
<ComboBox ItemsSource="{Binding TransfertViewTypes}"
SelectedValue="{Binding ViewType}" />
<!-- for idictionary -->
<ComboBox ItemsSource="{Binding TransfertViewTypes}"
DisplayMemberPath="Value" SelectedValuePath="Key"
SelectedValue="{Binding ViewType}" />

Check box for Column listview Wpf

How to create Check box for Column inside Listview. i was able to make checkbox for listview items. but i want to have checkbox for Column itself.like in windows:
here is code in XAML
<ListView HorizontalAlignment="Left" Grid.Row="1" Width="400">
<ListView.View>
<GridView>
<GridViewColumn Width="140" Header="Column1 With Checkbox">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox Tag="{Binding}" IsThreeState="False" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="140" Header="Column2" />
<GridViewColumn Width="115" Header="Column3" />
</GridView>
</ListView.View>
</ListView>
Note that this will only make checkboxes for items not Column itself. so how to make this happen?
You can make the header a custom control by defining it under the GridViewColumn.Header property.
<ListView HorizontalAlignment="Left" Grid.Row="1" Width="400">
<ListView.View>
<GridView>
<GridViewColumn Width="140">
<GridViewColumn.Header>
<StackPanel Orientation="Horizontal">
<Checkbox IsChecked="{Binding YourCheckedProperty}" />
<TextBlock Text="Column1" />
</StackPanel>
<GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn Width="140" Header="Column2" />
<GridViewColumn Width="115" Header="Column3" />
</GridView>
</ListView.View>
</ListView>

Binding collection of Threads to ListBox

There probably was a topic in which lays the solution for my problem but I've spend too much hours on this so I've decided to ask.
I have a ListView to which I've binded a collection of processes. And I have a ListBox in which I want to place Threads of a selected process. Binding in ListView works, but analogical in ListBox doesn't.
Here's my .xaml:
<Window x:Class="TaskManager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window" Height="453" Width="533" Icon="/TaskManager;component/Images/taskmgr.png">
<Grid>
<ListView Height="276" HorizontalAlignment="Left" Name="processesView" VerticalAlignment="Top" Width="503" ItemsSource="{Binding ProcessList}">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn DisplayMemberBinding="{Binding ProcessName}">
<GridViewColumn.Header>
<GridViewColumnHeader Click="nameColumnHeader_Click">
Name
</GridViewColumnHeader>
</GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Id}">
<GridViewColumn.Header>
<GridViewColumnHeader Click="IDColumnHeader_Click">
ID
</GridViewColumnHeader>
</GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding BasePriority}">
<GridViewColumn.Header>
<GridViewColumnHeader Click="priorityColumnHeader_Click">
Priority
</GridViewColumnHeader>
</GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn Header="Keep alive">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox x:Name="keepAliveBox" IsChecked="{Binding EnableRaisingEvents}" Checked="keepAliveBox_Checked" Unchecked="keepAliveBox_Unchecked" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<ListBox Height="120" HorizontalAlignment="Left" Margin="93,282,0,0" Name="threadBox" VerticalAlignment="Top" Width="200" ItemsSource="{Binding ElementName=processesView, Path=SelectedItem.Threads}">
<ListBox.ItemTemplate>
<DataTemplate>
<!--<ListBoxItem Content="{Binding}"/>-->
<Label Content="{Binding Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
After execution I can't see anything in the ListBox but if I click inside something is selected. So if I change the above to Content="TEST" I can see several Labels with "TEST" value. So it seems that I'm binding the name somehow incorrectly.
Here's the .cs part where I set the context:
public MainWindow()
{
InitializeComponent();
processesView.DataContext = this;
threadBox.DataContext = this;
...
}
Items were invisible but selectable so it was probable that I was binding the wrong thing. And that's the reason. I was binding to Name property of Thread whilst Process has a collection of ProcessThreads which don't have that property. Here's the fix in .xaml:
<ListBox Height="120" HorizontalAlignment="Left" Margin="93,282,0,0" Name="threadBox" VerticalAlignment="Top" Width="200" ItemsSource="{Binding ElementName=processesView, Path=SelectedItem.Threads}">
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Path=Id}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Can't wait for XAML debugger in Visual Studio 2015.

How to make GridView support multiple selection in wpf

This is my wpf file. I want the GridView to support multiple selections.
<ListView Name="deviceListBox"
Width="630"
Height="282"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ItemsSource="{Binding Items}"
SelectionChanged="deviceListBox_SelectionChanged"
SelectionMode="Single">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Label Width="15"
Height="25"
Margin="10,0,0,0"
HorizontalAlignment="center"
VerticalAlignment="Center" />
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<controls:PresenceIndicator Width="35"
Height="30"
Margin="7,0,0,0"
HorizontalAlignment="center"
VerticalAlignment="Center"
PhotoDisplayMode="Large"
SingleClickAction="ShowContactDetails"
Source="{Binding Path=SipURI}" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Label Width="95"
Height="25"
Margin="10,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="Username"
Foreground="Black" />
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<Label Height="30"
Margin="7,0,0,0"
HorizontalAlignment="left"
VerticalAlignment="Center"
Content="{Binding Path=Username}"
Foreground="Black" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
Change your SelectionMode to Multiple or Extended. See this MSDN post
Set the DataGrid.SelectionMode:
<DataGrid SelectionMode="Single" ...

Categories

Resources