Designing a Hamburger menu in WPF with Mahapps.Metro - wpf

Currently, I'm using a Grid of Buttons for housing keys for navigation. It's hideous, but gets the job done.
Here's the XAML chunk:
<Button x:Name="ShowMainMenu" Grid.Column="0" Margin="5" Content="Main Menu"/>
<Button x:Name="ShowReportsMenu" Grid.Column="2" Margin="5" Content="Reports"/>
<Button x:Name="Reset" Grid.Column="4" Margin="5" Content="Reset"/>
<Button x:Name="TryClose" Grid.Column="6" Margin="5" Content="Close"/>
Incidentally, I'm using Caliburn.micro, and so naming the buttons is enough to bind them to proper commands.
Now, I want them to put them in a Hamburger Menu.
What I have tried till now is this:
<Controls:HamburgerMenu >
<Controls:HamburgerMenu.ItemTemplate>
<DataTemplate DataType="{x:Type Controls:HamburgerMenuGlyphItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Glyph}" />
<TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Text="{Binding Label}" />
</Grid>
</DataTemplate>
</Controls:HamburgerMenu.ItemTemplate>
<Controls:HamburgerMenu.ItemsSource>
<Controls:HamburgerMenuItemCollection>
<Controls:HamburgerMenuGlyphItem Glyph="1" Label="Main Menu" cal:Message.Attach="[Event Click] = [Action ShowMainMenu]"/>
</Controls:HamburgerMenuItemCollection>
</Controls:HamburgerMenu.ItemsSource>
</Controls:HamburgerMenu>
But it doesn't work, because Controls:HamburgerMenuGlyphItem isn't a FrameworkElement.
By the way, the transitioning view is implemented like this:
So, how can I translate my bunch of Buttons into a HamburgerMenu? I can't find proper documentation for Caliburn.micro's HamburgerMenu as well.

Well, I figured it out myself.
Here's the code:
<DockPanel>
<DockPanel.Resources>
<DataTemplate x:Key="MenuItemTemplate">
<Grid Height="48" Background="Black">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<cal:ActionMessage MethodName="{Binding Tag}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe MDL2 Assets" Foreground="BlanchedAlmond" Text="{Binding Glyph}"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Foreground="White" Text="{Binding Label}"/>
</Grid>
</DataTemplate>
</DockPanel.Resources>
<Controls:HamburgerMenu Foreground="White" PaneBackground="#FF444444" IsPaneOpen="False" DisplayMode="CompactOverlay" OptionsItemTemplate="{StaticResource MenuItemTemplate}" ItemTemplate="{StaticResource MenuItemTemplate}">
<Controls:HamburgerMenu.ItemsSource>
<Controls:HamburgerMenuItemCollection>
<Controls:HamburgerMenuGlyphItem Glyph="M" Label="Main Menu" Tag="ShowMainMenu"/>
<Controls:HamburgerMenuGlyphItem Glyph="I" Label="Invoice" Tag="OpenInvoiceMaker"/>
<Controls:HamburgerMenuGlyphItem Glyph="R" Label="Reports" Tag="ShowReportsMenu"/>
</Controls:HamburgerMenuItemCollection>
</Controls:HamburgerMenu.ItemsSource>
<Controls:HamburgerMenu.OptionsItemsSource>
<Controls:HamburgerMenuItemCollection>
<Controls:HamburgerMenuGlyphItem Glyph="A" Label="About" Tag="About"/>
</Controls:HamburgerMenuItemCollection>
</Controls:HamburgerMenu.OptionsItemsSource>
<Controls:HamburgerMenu.Content>
<DockPanel>
<Border Background="#FF444444" DockPanel.Dock="Top">
<TextBlock x:Name="Header" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15" Foreground="White" Text="{Binding ActiveItem.DisplayName}" />
</Border>
<ScrollViewer Grid.Row="1" CanContentScroll="True" IsDeferredScrollingEnabled="False">
<Controls:TransitioningContentControl Transition="LeftReplace" x:Name="ActiveItem" Content="{Binding ActiveItem}"/>
</ScrollViewer>
</DockPanel>
</Controls:HamburgerMenu.Content>
</Controls:HamburgerMenu>
</DockPanel>
Basically, I used EventTrigger to achieve the same functionality as a button. The rest was easy.

Related

Pop up is not opening after Rebinding the DataGrid

I have started to work on WPF recently. Currently I am facing an issue.
I have a window , inside that i have an user control which Contains DataGrid, Combobox ,Buttons and a Pop Up.
I am binding DataGrid with List of Notes(string) with Delete Buttons.So when we click on that Button, the pop up will open and Pop up has confirmation message with Yes or No button.
When i click the Yes button i am deleting the Note and Rebinding only the DataGrid.And after that when i click on the Delete Button the pop up is not opening.
If I dont Rebind the DataGrid, in that case PopUp is opening but the problem is deleted Note is still there in the DataGrid though that is deleted from the database, which make confusion whether the Note is deleted or not. That is why I am rebinding.
But Rebinding cause the issue of not opening Popup.
Please help me out how can i get this done.
My Pop up looks like this:
<Popup x:Name="Popupdelete"
AllowsTransparency="True"
HorizontalOffset="-10"
VerticalOffset="10"
Placement="Mouse"
StaysOpen="False"
IsOpen="{Binding IsDeletePopUpOpen}">
<Grid x:Name="LayoutRoot" Background="Transparent" Height="105">
<!-- My confirmation message and Yes No button goes Here-->
</Grid>
IsDeletePopUpOpen is set in the ViewModel.
Thanks & Regards,
Joy
Code goes here:
<-- Delete Pop Up-->
<Popup x:Name="Popupdelete"
AllowsTransparency="True"
HorizontalOffset="-10"
VerticalOffset="10"
Placement="Mouse"
StaysOpen="False"
IsOpen="{Binding IsDeletePopUpOpen}">
<Grid x:Name="LayoutRoot" Background="Transparent" Height="105">
<Border BorderBrush="#E2E2E2" BorderThickness="6" Background="White">
<Grid>
<TextBlock TextWrapping="Wrap" Margin="10,10,10,50" Foreground="#454545" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" Height="30" Width="Auto" Text="Are you sure you want" />
<TextBlock TextWrapping="Wrap" Margin="50,15,50,25" Foreground="#454545" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" Height="30" Width="Auto" Text="to delete?"/>
<Button Content="Yes" Margin="35,50,80,0" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center" Command="{Binding DeleteYesCmd}" CommandParameter="{Binding SelectedItem, ElementName=lstCustomer}" Style="{StaticResource SaveButtonStyle}" />
<TextBlock Text="or" Margin="75,50,60,15" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#919191" FontSize="10" />
<TextBlock Margin="95,48,35,12" HorizontalAlignment="Center" VerticalAlignment="Center" ><Hyperlink Command="{Binding DeleteNoCmd}"><Run Text="No" FontWeight="Bold" FontSize="12"/></Hyperlink></TextBlock>
</Grid>
</Border>
</Grid>
</Popup>
<--List Of Notes with Delete Image Button-->
<Border Background="#F0F0F0" CornerRadius="0" Visibility="{Binding NotesListViewVisibility}">
<ScrollViewer x:Name="scrollMe" CanContentScroll="True" Height="80" >
<Border Background="White" CornerRadius="5,0,0,5">
<Grid Background="White" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="101*"/>
<ColumnDefinition Width="35*"/>
</Grid.ColumnDefinitions>
<ListView x:Name="lstCustomer" BorderBrush="Transparent" BorderThickness="0" ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" RequestBringIntoView="RemoveScrollViewFocus"
ItemsSource="{Binding OutcomeNotesView , Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionMode="Single"
Background="#FFFFFF" ItemContainerStyle="{StaticResource ListviewItemContainerStyle}" Grid.ColumnSpan="2">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UC:NoteStackPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Border BorderBrush="#E6E6E6" BorderThickness="0,0,0,1"
Width="{Binding ActualWidth, Converter={StaticResource widthconv}, ElementName=lstCustomer}">
<StackPanel x:Name="spNotes" Orientation="Vertical" Margin="0,10,0,10" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Orientation="Horizontal">
<Button x:Name="btnPrimaryOfficer" MouseEnter="SetEmployeePopUpPlacement" Style="{StaticResource AuthButton}"
CommandParameter="{Binding}" Command="{Binding DataContext.OutcomeEmployeePopUp, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}">
<Button.Visibility>
<MultiBinding Converter="{StaticResource ActiveInactiveConv}" ConverterParameter="Hyper">
<Binding Path="EmployeeInfo.ActiveStatusCode"/>
<Binding Path="EmployeeInfo.Id"/>
</MultiBinding>
</Button.Visibility>
<Button.InputBindings>
<MouseBinding Gesture="LeftDoubleClick" CommandParameter="{Binding}"
Command="{Binding DataContext.OutcomeEmployeePopUp, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}"/>
</Button.InputBindings>
<StackPanel Orientation="Horizontal">
<Image Source="{StaticResource imgUser}" Width="15" Height="15" HorizontalAlignment="Left" />
<TextBlock Text="{Binding EmployeeInfo.Name}" Style="{StaticResource AuthEditProfile}" FontFamily="{StaticResource FontBold}" FontSize="12" Margin="2,0,0,0" />
</StackPanel>
</Button>
<StackPanel Orientation="Horizontal" >
<StackPanel.Visibility>
<MultiBinding Converter="{StaticResource ActiveInactiveConv}" ConverterParameter="Normal">
<Binding Path="EmployeeInfo.ActiveStatusCode"/>
<Binding Path="EmployeeInfo.Id"/>
</MultiBinding>
</StackPanel.Visibility>
<!--Visibility="{Binding PrimaryOfficerActiveStatusCode,Converter={StaticResource ActiveInactiveConv},ConverterParameter=Normal}">-->
<Image Source="{StaticResource imgUserBlack}" Width="15" Height="15" HorizontalAlignment="Left" />
<TextBox Text="{Binding EmployeeInfo.Name}" Style="{StaticResource TextWithoutHyperlink}" Margin="2,0,0,0" />
</StackPanel>
<TextBlock Background="Transparent" Text="on"
FontFamily="{StaticResource FontMedium}" FontSize="12" Foreground="#919191" Margin="4,0,2,0"
VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
<TextBox Text="{Binding AddedDate, StringFormat=\{0:MM/dd/yy\}}" Foreground="#454545" VerticalAlignment="Bottom" MaxLength="{Binding Length}"
HorizontalAlignment="Center" Margin="2,0,0,0" Style="{StaticResource ContentText}"/>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right" Visibility="{Binding DataContext.DeleteNoteVisibility, ElementName=OutcomeNotesView}" Orientation="Horizontal">
<StackPanel Orientation="Horizontal" >
<Button x:Name="btnDelete" Width="Auto" MouseEnter="btnDelete_MouseEnter" MouseLeave="btnDelete_MouseLeave"
CommandParameter="{Binding}"
Command="{Binding DataContext.LoadDeletePopUp, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}"
Style="{StaticResource AuthButton}">
<StackPanel Orientation="Horizontal">
<Image Source="{StaticResource imgdeleteicon}" Style="{StaticResource AuthImage}"/>
</StackPanel>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<StackPanel >
<TextBox Text="{Binding Note}" Foreground="#454545" TextWrapping="Wrap" Height="Auto"
Width="{Binding ActualWidth, Converter={StaticResource widthconv}, ElementName=lstCustomer}"
Style="{StaticResource ContentText}" FontFamily="{StaticResource FontNormal}" FontSize="12" Padding="0"/>
<TextBlock x:Name="txtSavingNoteId" Visibility="Collapsed" Text="{Binding NoteId}" />
</StackPanel>
</StackPanel>
</Border>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Border>
</ScrollViewer>
</Border>
</StackPanel>
public List<ActivityNotesDto> OutcomeNotesView
{
get
{
return outcomeNotesView;
}
set
{
outcomeNotesView = value;
OnPropertyChanged("OutcomeNotesView");
}
}
DeleteActivityNote(deletingNoteDetails);
OutcomeNotesView = GetActivityNotesList();
Please let me know if i am missing something.Since first time when i click button Delete popup is opening and it is deleting but next time when i click on the Delete image it didnt open the pop up.
Thanks & Regards,
Joy

Make ScrollViewer fill dynamic area

In the example below I cannot get the ScrollViewer to fill the space available, The height is unknown due to the dynamic content above but is there no way it can fill the space available instead of over running?
<Grid x:Name="Main" Height="200" MaxHeight="200">
<StackPanel>
<Grid x:Name="MainContent" Height="170" MaxHeight="170">
<StackPanel>
<TextBlock FontSize="24" Text="Dynamic data "/>
<TextBlock FontSize="24" Text="height "/>
<TextBlock FontSize="24" Text="unknown... "/>
<Grid x:Name="Results" Background="Red">
<ScrollViewer>
<StackPanel>
<TextBlock FontSize="24" Text="Result set... 0"/>
<TextBlock FontSize="24" Text="Result set... 1"/>
<TextBlock FontSize="24" Text="Result set... 2"/>
<TextBlock FontSize="24" Text="Result set... 3"/>
</StackPanel>
</ScrollViewer>
</Grid>
</StackPanel>
</Grid>
<Grid x:Name="Nav">
<Button HorizontalAlignment="Left" Content="Back"/>
<Button HorizontalAlignment="Right" Content="Forward"/>
</Grid>
</StackPanel>
</Grid>
in MainContent Grid use DockPanel instead of StackPanel with LastChildFill=True, something like this:
<Grid x:Name="MainContent" Height="170" MaxHeight="170">
<DockPanel LastChildFill="True">
<TextBlock DockPanel.Dock="Top" FontSize="24" Text="Dynamic data "/>
<TextBlock DockPanel.Dock="Top" FontSize="24" Text="height "/>
<TextBlock DockPanel.Dock="Top" FontSize="24" Text="unknown... "/>
<Grid x:Name="Results" Background="Red">
<ScrollViewer>
<StackPanel>
<TextBlock FontSize="24" Text="Result set... 0"/>
<TextBlock FontSize="24" Text="Result set... 1"/>
<TextBlock FontSize="24" Text="Result set... 2"/>
<TextBlock FontSize="24" Text="Result set... 3"/>
</StackPanel>
</ScrollViewer>
</Grid>
</DockPanel>
</Grid>
then last element of DockPanel will adjust itself to available space
I solved it by adding another element for the Scrollviewer's Height to bind:
<grid Grid.row="3" x:Name="Mirror">
</grid>
<ScrollViewer Grid.row="3" Height="{Binding ElementName=uxMirror,XPath=ActualHeight}">
</ScrollViewer>
Firstly your layout is kind of a mess. Why do you need to put a StackPanel as the only child of a Grid. For the Rows? Use RowDefinitions and ColumnDefinitions when dealing with Grid
From my understanding of your layout, you can pretty much do everything you need with just a Grid and a DockPanel. When dealing with layout containers, Aim to get your layout with the "least" number of containers as "efficiently" possible. Even if it aint any real performance benefit, it helps enormously when going through someone else's code to not have redundant nesting
<Grid x:Name="Main">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
FontSize="24"
Text="Dynamic data " />
<TextBlock Grid.Row="1"
FontSize="24"
Text="height " />
<TextBlock Grid.Row="2"
FontSize="24"
Text="unknown... " />
<ScrollViewer Grid.Row="3"
Background="Red">
<StackPanel>
<TextBlock FontSize="24"
Text="Result set... 0" />
<TextBlock FontSize="24"
Text="Result set... 1" />
<TextBlock FontSize="24"
Text="Result set... 2" />
<TextBlock FontSize="24"
Text="Result set... 3" />
</StackPanel>
</ScrollViewer>
<DockPanel x:Name="Nav"
Grid.Row="4"
LastChildFill="False">
<Button Content="Back"
DockPanel.Dock="Left" />
<Button Content="Forward"
DockPanel.Dock="Right" />
</DockPanel>
</Grid>
This should give you everything your looking for. If you need to restrict Height dimensions with static values, Add them in accordingly when absolutely needed.
As for the "Nav" DockPanel, yes you can using HorizontalAlignment get your Button's positioned Left and Right and thereby not use the DockPanel, but that would go against the concept of trying to keep "one" item in a Grid cell and hence the DockPanel usage.

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>

WPF ListView with column names?

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.

Resources