WPF ListView with column names? - wpf

I have this ListView and I'm using a DataTemplate (as you can see) for items.
How can i add column names to the ListView with this ItemTemplate definition?
I cannot use that GridViewColumn definition, because this ListView uses lazy data loading, so when there are too many rows, it fetches them on demand. GridViewColumn somehow does not function with this lazy loading.
<ListView Grid.Row="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" Background="Transparent" MinWidth="580" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Grid.Column="0" Text="{Binding Path=Benutzer.Value.Code}"/>
<TextBlock VerticalAlignment="Center" Grid.Column="1" Text="{Binding Path=Nachname}"/>
<TextBlock VerticalAlignment="Center" Grid.Column="2" Text="{Binding Path=Vorname}"/>
<TextBlock VerticalAlignment="Center" Grid.Column="3">
<TextBlock.Text>
<Binding Path="GeburtDate" StringFormat="{}{0:d}"/>
</TextBlock.Text>
</TextBlock>
<Button VerticalAlignment="Center" Grid.Column="4" Style="{StaticResource StyleEditButton}" Content="Öffnen..." Tag="{Binding}" Click="OpenPersonButton_Click"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>

I don't think there is any point in using a ListView if, as you say, you cannot use GridView (or any other view). I would exchange ListView for ItemsControl (or ListBox if you need a selectable item or any of the other things that ListBox offers).
If what you say is true, you could just use a stack panel to position a header row above your data rows:
<StackPanel>
<!-- Header -->
<StackPanel Orientation="Horizontal">
<TextBlock Width="220" TextAlignment="Center" Text="Code" />
<TextBlock Width="100" TextAlignment="Center" Text="Nachname" />
<TextBlock Width="100" TextAlignment="Center" Text="Vorname" />
<TextBlock Width="70" TextAlignment="Center" Text="GeburtDate" />
</StackPanel>
<!-- Data rows -->
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" MinWidth="580">
<TextBlock Width="220" TextAlignment="Center" Text="{Binding Path=Benutzer.Value.Code}" />
<TextBlock Width="100" TextAlignment="Center" Text="{Binding Path=Nachname}" />
<TextBlock Width="100" TextAlignment="Center" Text="{Binding Path=Vorname}" />
<TextBlock Width="70" TextAlignment="Center" Text="{Binding Path=GeburtDate, StringFormat={0:d}}" />
<Button VerticalAlignment="Center" Grid.Column="4" Style="{StaticResource StyleEditButton}" Content="Öffnen..." Tag="{Binding}" Click="OpenPersonButton_Click"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Hope that helps. You might also like to read about virtualizing panels. That might provide the kind of laziness you're talking about.

Related

WPF Checkbox is cross

I'm using VS2017 and I'm adding a checkbox to an ItemsControl's template. I'm seeing that the checkmark is a cross ("X") rather than a checkmark. Did they change this recently?
<ItemsControl ItemsSource="{Binding AllParams}" Foreground="White">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Height="15" Width="15" Grid.Column="0" Margin="2,0,10,0" />
<Button Grid.Column="1" Command="{Binding EditViewCommand}" ToolTip="{Binding Description}" Style="{StaticResource NavigationButtonStyle}">
<TextBlock>
<Run Text="{Binding DisplayName}"/>
</TextBlock>
</Button>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Is there a setting to choose? What am I missing?

GridViewColumn header alignemenet

I have a GridView:
<GridViewColumn Width="{Binding ElementName=helperField, Path=ActualWidth}" >
<GridViewColumn.Header>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{x:Static lang:TextResource.name}" HorizontalAlignment="Left" Width="200" />
<TextBlock Margin="20,0,0,0" Text="{Binding SelectedWorkingDate.WorkingDate.Date, StringFormat=d}" Width="100" />
<TextBlock Margin="0,0,17,0" Text="{x:Static lang:TextResource.workingtime_time}" Width="80" />
<TextBlock Text="{x:Static lang:TextResource.desc}" Margin="15,0,0,0" Width="300" HorizontalAlignment="Right" />
</StackPanel>
</GridViewColumn.Header>
...
Now my gridViewColumn filling all the available space, but the header also is moving after f.e. maximizing the window.
What can I do to have explicit position of my StackPanel in the header.
I have also created a blank project with ListView, set the GridViewColumn width="900" and see the same behavior, so maybe there is a property I should use to change that behavior?
You can use Canvas:
<Canvas>
<TextBlock Canvas.Top="20" Canvas.Left="20" Text="{x:Static lang:TextResource.name}"
</Canvas>

Placing a textblock in a certain grid column

I populate a textblock with data from Service and I bind the data to Listbox and then display it in textblocks, so far so good. My problem is that I want each textblock content to be placed in certain space in certain column, but this doesn't seem to work as my text is just put in each line and is not alligned as it should be.
here is my code:
<Grid x:Name="BranchesGrid" Margin="12,0,-12,6" Grid.Row="2" Height="542" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<ListBox Height="530" HorizontalAlignment="Left" Margin="12,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="456" Grid.ColumnSpan="4">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ID}" FontSize="20" Grid.Column="0" Padding="55,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Name}" FontSize="20" Grid.Column="1" Padding="110,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding City}" FontSize="20" Grid.Column="2" Padding="70,10,5,10" HorizontalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Where seems to be the problem?
Try this:
<Grid x:Name="BranchesGrid" Margin="12,0,-12,6" Grid.Row="2" Height="542" VerticalAlignment="Bottom">
<ListBox Height="530" HorizontalAlignment="Left" Margin="12,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="456" Grid.ColumnSpan="4">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ID}" FontSize="20" Grid.Column="0" Padding="55,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Name}" FontSize="20" Grid.Column="1" Padding="110,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding City}" FontSize="20" Grid.Column="2" Padding="70,10,5,10" HorizontalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

textblock in user control TextWrapping not wrapping

I created user control with the textblock. But it will not wrap. This user control servers as a listboxitem.
<Grid x:Name="MainGrid" Height="Auto" Width="Auto">
<StackPanel Orientation="Horizontal">
<Image Height="50" Width="100" Stretch="Uniform" Name="image1" Source="{Binding Path=VideoImageUrl}" Margin="12,12,13,84" MouseLeftButtonDown="image1_MouseLeftButtonDown" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" />
<StackPanel Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Height="Auto" HorizontalAlignment="Left" Name="titleTextBox"
Text="{Binding Path=Title, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" FontSize="14" FontWeight="SemiBold" />
<StackPanel Orientation="Vertical" x:Name="StackPanelDetails">
<TextBlock Height="Auto" HorizontalAlignment="Left" Name="desciptionTextBox"
TextWrapping="Wrap"
Text="{Binding Path=Desciption, Mode=OneWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" />
<Line />
<ItemsControl x:Name="CustomItemsSource" ItemsSource="{Binding Path=LinksList}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink NavigateUri="{Binding Path=TopicUrl}" RequestNavigate="Hyperlink_RequestNavigate" >
<TextBlock Text="{Binding Path=TopicName}" />
</Hyperlink>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
A ListBox's default template does not automatically limit the width of its items, but instead uses a ScrollViewer, which shows a horizontal scrollbar when an item is wider than the ListBox.
You can remove the ScrollViewer by replacing the ListBox's Template:
<ListBox ...>
<ListBox.Template>
<ControlTemplate>
<StackPanel IsItemsHost="True"/>
</ControlTemplate>
</ListBox.Template>
...
</ListBox>
Another important thing to note is that a StackPanel in the top-level Grid won't properly resize the contained elements. In the following simplified example the text in the TextBlock is not wrapped because the containing StackPanel simply does not resize it as you expect:
<Grid>
<StackPanel Orientation="Horizontal">
<Image ... />
<Text TextWrapping="Wrap" Text=... />
</StackPanel>
</Grid>
This way it works as you expect:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image ... />
<TextBlock Grid.Column="1" TextWrapping="Wrap" Text=... />
</Grid>

Button alignment problem in listbox in WPF

I have a listbox containing itemtemplate like this
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold" />
<TextBlock Text="{Binding [1]}"></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
</Grid>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" DockPanel.Dock="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1" HorizontalAlignment="Right"></Button>
</StackPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This listbox is in first column of a grid which has a splitter.
Now problem is that I am not able to align the button to right side of listbox item.
One Grid is enough here. You only need one star-sized column (for content) and one Auto-sized column (for the button):
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate >
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold"/>
<TextBlock Text="{Binding [1]}" ></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1"></Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Resources