I want to bind the image and text together in the same column. I managed to bind the text part but failed to bind the image part. This is what I've done so far:
<ListView.View>
<GridView>
<GridViewColumn x:Name="TimeColumn" Header="Time" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock>
<TextBlock.Text>
<MultiBinding>
<!--<PUT IMAGE>-->
<Binding Path="Time"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
This is my expected result:
Any suggestion?
You cannot bind both text and image into the TextBlock so you need to try something like:
<ListView.View>
<GridView>
<GridViewColumn x:Name="TimeColumn" Header="Time" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image /> <!-- YOU NEED TO POINT THIS TO YOUR IMAGE -->
<TextBlock Text="{Binding Time}"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
Related
How do I wrap text in a Grid?
In MainWindow.xaml
<Grid>
<ListView Margin="10" Name="Users" >
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="300" DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Header="Age" Width="200" DisplayMemberBinding="{Binding Age}" />
</GridView>
</ListView.View>
</ListView>
</Grid>
In MainWindow.xaml.cs
public ObservableCollection<User> items = new ObservableCollection<User>();
items.Add(new User() { Name = "John", Age = 42 });
Users.ItemsSource = items;
You should create DataTemplate for the GridViewColumn and place TextBlock. Then it is possible to use TextWrapping property. Work example:
<ListView Name="Users">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="385">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding Name}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Age" Width="385">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding Age}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
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.
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>
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>
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.