WPF Listview Horizontal List - wpf

I am using listview in my WPF project. But the items are listed horizontally. I want it to be listed vertically and pass to the second column without a vertical scrollbar. How can I do that?
What I want to do:
My listview code:
<ListView Grid.Row="1" x:Name="listviewViews" HorizontalContentAlignment="Stretch" Visibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
SelectionMode="Single" PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" SelectionChanged="listviewViews_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Height="{Binding (FrameworkElement.Height)}"
Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="190">
<Grid HorizontalAlignment="Right" Margin="0 5" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="150"/>
<ColumnDefinition Width="35"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TextBlock FontFamily="{StaticResource FontAwesome}" Margin="5 0" VerticalAlignment="Center">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsDisabled}" Value="True">
<Setter Property="Text" Value="" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock x:Name="txt" Text="{Binding ViewName}" VerticalAlignment="Center" Grid.Column="0"/>
</StackPanel>
<Button x:Name="btnViewDelete" ToolTip="{DynamicResource Delete}" Click="btnViewDelete_Click" Grid.Column="1">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Control this behavior via WrapPanel's Orientation property
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" ... />
</ItemsPanelTemplate>
</ListView.ItemsPanel>

I edited the code as you said, but still one line remains below and vertical scrolling occurs:
Screenshot
Listview code:
<ListView Grid.Row="1" x:Name="listviewPools" HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"
Height="{Binding (FrameworkElement.ActualHeight)}"
Width="{Binding (FrameworkElement.Width),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Right" Margin="0 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txt" Text="{Binding PoolName}" VerticalAlignment="Center" Grid.Column="0"/>
<Button x:Name="btnFilters" ToolTip="{DynamicResource Filters}" Click="btnFilters_Click" Grid.Column="1">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
<Button x:Name="btnPoolEdit" ToolTip="{DynamicResource Edit}" Click="btnPoolEdit_Click" Grid.Column="2">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
<Button x:Name="btnPoolDelete" ToolTip="{DynamicResource Delete}" Click="btnPoolDelete_Click" Grid.Column="3">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Related

How could I fill the available space with a ItemsControl and and UniformGrid?

I want to use a ItemsControl with a uniform template, to have 4 rows and 3 columns. And I want to fill all the available space, so if I change the size of the window, it should fill all the space.
My ItemsControl is this:
<Viewbox Stretch="UniformToFill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1">
<ItemsControl Background="Yellow" Name="icCalendarios" ItemsSource="{Binding Calendarios}" Margin="0,0,30,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Row="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="4" Columns="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<myControls:MyControl VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Viewbox>
This my Control:
<DockPanel>
<Viewbox Name="vbReescalado" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Stretch="UniformToFill"
Width="{Binding ElementName=MesConEventos, Path=WidthReescalado}">
<DockPanel>
<TextBlock Text="{Binding Date}" />
<Grid Height="30" DockPanel.Dock="Top">
<TextBox Foreground="Black" Name="txtEncabezado" FontSize="12"
BorderBrush="Transparent" BorderThickness="0" Background="Transparent"
VerticalAlignment="Center" TextAlignment="Center" HorizontalAlignment="Stretch"
Padding="25,0,0,0"
Text="{Binding Encabezado}"/>
</Grid>
<ItemsControl ItemsSource="{Binding NombresDias}" DockPanel.Dock="Top" Grid.Column="1">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock TextAlignment="Center" Text="{Binding}" FontSize="8"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="8" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Dias}" Grid.Column="1" Margin="0,0,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0.25" Padding="0,0,0,0" Margin="0,0,0,0"
BorderBrush="{Binding Converter={StaticResource ColorRecuadroDiaConverter}}"
Width="25" Height="25">
<Border Name="InnerBorder" Background="{Binding ColorDia}" BorderBrush="{Binding Path=ColorRecuadroExterno}" BorderThickness="{Binding Path=GrosorRecuadroExterno}" Padding="0,0,0,0" Margin="0,0,0,0">
<DockPanel>
<!--Número de día.-->
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" FlowDirection="RightToLeft">
<TextBox TextAlignment="Center" BorderBrush="Transparent" Background="Transparent" Text="{Binding Path=., Converter={StaticResource DateConverter}}" FontSize="5" Margin="0,0,0,0" Padding="0,0,0,0">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsTargetMonth}" Value="false">
<Setter Property="TextBlock.Foreground" Value="Gray"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
<TextBox IsEnabled="{Binding IsEnabled}" FontSize="2.5" Height="18" AcceptsReturn="True" TextWrapping="Wrap" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Disabled"
Background="{x:Null}"
Foreground="{Binding Path=ColorTexto}"
Text="{Binding Path=Notes}"/>
</DockPanel>
</Border>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="6" Columns="8" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DockPanel>
</Viewbox>
</DockPanel>
But in this case MyControl doesn't adjust to parent, I have to set a size manually because if not, it is not shown.
How could adjust the month to the available space?
Thanks.
UniformGrid always measures its content with auto size unless fixed size is set, so it will be difficult to achieve this behavior. If you have a fixed numbers of rows and columns, I would use Grid instead. The tricky part is dynamically setting Grid.Row and Grid.Column. Here is a very simple test with Style binding:
<ItemsControl x:Name="cntrl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Row}" />
<Setter Property="Grid.Column" Value="{Binding Col}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
And this is the sample data:
cntrl.ItemsSource = Enumerable.Range(0, 12).Select(s => new { Row = s % 3, Col = s % 4});

Wpf Dock Panel Dock left and Dock right

I am not able to move buttons inside of a dock panel to the right, I tried few solutions, and after all I put them in stack panels and tried to move them to the right, but acctualy they wont move anywhere, here is how it looks:
And here is my code:
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True" Background="Black" Opacity="0.7">
<Expander.Header>
<DockPanel Height="50">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" DockPanel.Dock="Right"> <Button DockPanel.Dock="Right" Content="Test" Margin="0,0,28,0"/></StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" DockPanel.Dock="Left"> <TextBlock FontWeight="Normal" FontFamily="Verdana" FontSize="20" Height="25" Foreground="#83D744" Text="{Binding Path=Name,StringFormat= Order Number:# {0}}" /></StackPanel>
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
edit:
This above causes width on dock panel
<DockPanel Height="50" Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}">
<Button DockPanel.Dock="Right" Content="Test" Margin="0,0,28,0"/>
<TextBlock FontWeight="Normal" FontFamily="Verdana" FontSize="20" Height="25" Foreground="#83D744" Text="{Binding Path=Name,StringFormat= Order Number:# {0}}" />
</DockPanel>
Try the following method. this works in my project
<DockPanel Height="50">
<grid DockPanel.Dock="Right">
<Button Content="Test" Margin="0,0,28,0"/>
</grid >
<grid DockPanel.Dock="Left">
<TextBlock FontWeight="Normal" FontFamily="Verdana" FontSize="20" Height="25" Foreground="#83D744" Text="{Binding Path=Name,StringFormat= Order Number:# {0}}"/>
</grid>
</DockPanel>
Apply Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}" to your DockPanel and see if this solves your problem.

Performance issue with ItemsControl and complex ItemTemplate

I've a performance problem with an ItemsControl. I've virtualized the ItemsControl using the following style
<Style x:Key="VirtualizedItemsControl"
TargetType="{x:Type ItemsControl}">
<Setter Property="VirtualizingStackPanel.IsVirtualizing"
Value="True" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True">
<ScrollViewer Padding="{TemplateBinding Control.Padding}"
Focusable="False">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
My ItemsTemplate is an Expander with another ItemsControl which ItemsTemplate is an Expander with a DataGrid (DataContext is a list in a list).
When my bound data is getting more (like 100 entries in the first list and in each datagrid ~100 entries) the ui is getting really slow if i start to scroll.
I don't know why it's getting so slow.
I change the background color of each DataGrid cell if there are changes. That's why I use DataGridTemplateColumns.
<ItemsControl ItemsSource="{Binding MyList}"
x:Name="_container"
Style="{StaticResource VirtualizedItemsControl}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock />
<Button Grid.Column="1"
Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.DeleteCommand}"
CommandParameter="{Binding}">
<Image Source="trashcan-delete.png"
HorizontalAlignment="Right" />
</Button>
</Grid>
</Expander.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Some text" />
<ComboBox Grid.Column="1"
Margin="5 0"
Width="150"
HorizontalAlignment="Left"
Text="{Binding Name.Property}"
SelectedItem="{Binding SelectedName, UpdateSourceTrigger=PropertyChanged}"
Foreground="Black"
IsEditable="True"
DisplayMemberPath="Name"
ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.Children}"
Background="{Binding Name.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</Grid>
<ItemsControl Grid.Row="1"
ItemsSource="{Binding ParameterBlocks}"
Style="{StaticResource VirtualizedItemsControl}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Index, Converter={StaticResource NumberToBlockHeaderConverter}}"
FontWeight="Bold"
Foreground="White" />
<Button Grid.Column="1"
Command="{Binding RelativeSource={RelativeSource AncestorType=Expander, AncestorLevel=2}, Path=DataContext.DeleteBlockCommand}"
CommandParameter="{Binding}">
<Image Source="trashcan-delete.png"
HorizontalAlignment="Right" />
</Button>
</Grid>
</Expander.Header>
<Grid Background="#E5E5E5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0"
Content="Some text"
VerticalAlignment="Center"
IsChecked="{Binding IsWaitingEnabled.Property}"
Background="{Binding IsWaitingEnabled.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}">
<Label Grid.Column="1"
Margin="15 0 0 0"
VerticalAlignment="Center"
Content="Some text"
IsEnabled="{Binding IsWaitingEnabled.Property}" />
<Xctk:IntegerUpDown Grid.Column="2"
Minimum="0"
Width="60"
Margin="5 0 0 0"
HorizontalAlignment="Left"
Text="Some text"
IsEnabled="{Binding IsWaitingEnabled.Property}"
</Grid>
<DataGrid ItemsSource="{Binding Channels}"
Style="{StaticResource StandardGridStyle}"
x:Name="BlockGrid"
Grid.Row="1"
CanUserSortColumns="True"
Margin="5 0"
MaxHeight="200"
SelectedItem="{Binding SelectedEntry}"
CanUserAddRows="True">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Some text"
Width="200">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Channel.Property, UpdateSourceTrigger=PropertyChanged}"
Foreground="Black"
Background="{Binding Channel.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox Text="{Binding Channel.Property, UpdateSourceTrigger=PropertyChanged}"
Foreground="Black"
IsEditable="True"
ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type Expander}, AncestorLevel=2}, Path=DataContext.SelectedChannelList.Channels}"
IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=DataContext.IsPasswordProtected, Converter={StaticResource BoolToOppositeBoolConverter}}"
Background="{Binding Channel.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Some text"
Width="150"
Foreground="Black"
Binding="{Binding Value.Property, UpdateSourceTrigger=PropertyChanged}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Value.IsDirty}"
Value="true">
<Setter Property="Background"
Value="#FFDDA203" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTemplateColumn Header="Some text">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Block.Property}"
Foreground="Black"
Background="{Binding Block.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<Xctk:IntegerUpDown Minimum="1"
Maximum="{Binding RelativeSource={RelativeSource AncestorType={x:Type Expander}, AncestorLevel=2}, Path=DataContext.ParameterBlocks, Converter={StaticResource ListToCountConverter}}"
Text="{Binding Block.Property, UpdateSourceTrigger=PropertyChanged}"
Background="{Binding Block.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}">
<I:Interaction.Triggers>
<I:EventTrigger EventName="ValueChanged">
<Commands:EventToCommand Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Expander}, AncestorLevel=2}, Path=DataContext.BlockChangedCommand}"
CommandParameter="{Binding }" />
</I:EventTrigger>
</I:Interaction.Triggers>
</Xctk:IntegerUpDown>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
<I:Interaction.Behaviors>
<Commands:DataGridScrollToSelectedItemBehavior />
</I:Interaction.Behaviors>
</DataGrid>
<StackPanel Grid.Row="2"
Margin="5"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Command="{Binding DeleteEntryCommand}"
Content="Some text"
CommandParameter="{Binding ElementName=BlockGrid, Path=SelectedItems}"
Width="120"
Margin="5 0" />
<Button Content="Some text"
Command="{Binding AddEntryCommand}"
Width="120"
Margin="5 0"
HorizontalAlignment="Right" />
</StackPanel>
</Grid>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Done; see my last comment.
The Expander style was making some trouble.

WPF Resize Grid Row when selected

I have a data template that contains a grid. I would like to make the selected row of the grid larger (height-wise) when the user selects the row. Each cell in the row contains a rectangle for styling purposes and a textbox for data. I have the following that resizes the row when the user clicks on the rectangle, but not when they click inside the text box (which is where they are likely to click). How can I make the row resize when the user clicks in the textbox?
<!-- Mapping Rules Template -->
<DataTemplate x:Key="MappingRuleTemplate">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Shading -->
<Rectangle
Grid.Column="0"
Style="{StaticResource TableRowShade}"
Margin="0" />
<Rectangle
Grid.Column="1"
Style="{StaticResource TableRowShadeALT}"
Margin="0" />
<Rectangle
Grid.Column="2"
Style="{StaticResource TableRowShade}"
Margin="0" />
<Rectangle
Grid.Column="3"
Style="{StaticResource TableRowShadeALT}"
Margin="0"
HorizontalAlignment="Stretch" />
<!-- End Shading -->
<Button Name="DeleteButton"
Grid.Column="0"
Style="{StaticResource ImageButton}"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}}, Path=DataContext.DeleteRuleButtonClickedCommand}"
ToolTip="Delete this mapping rule"
local:AttachedImage.Image="{StaticResource CancelImageSource}" >
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource DeleteButtonConverter}">
<Binding ElementName="TableName" Path="Text" />
<Binding ElementName="FieldNumber" Path="Text" />
</MultiBinding>
</Button.CommandParameter>
</Button>
<TextBox
Name="TableName"
Grid.Column="1"
VerticalAlignment="Center"
Margin="4,0,4,5"
Height="20"
Text="{Binding TableName, Mode=TwoWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
FocusManager.IsFocusScope="True"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch" />
<TextBox
Name="FieldNumber"
Grid.Column="2"
VerticalAlignment="Center"
Margin="4,0,4,5"
Height="20"
Width="50"
Text="{Binding FieldNumber, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
TextAlignment="Center"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch" />
<TextBox
Name="DynamicSQL"
Grid.Column="3"
VerticalAlignment="Center"
Margin="4,0,4,5"
Text="{Binding DynamicSQL, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
Height="20"
Width="303" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="MappingRuleSelectedTemplate">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="110"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="150" Style="{StaticResource TableRowShadeALT}"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*" Style="{StaticResource TableRowShadeALT}"/>
</Grid.ColumnDefinitions>
<!-- Shading -->
<Rectangle
Grid.Column="0"
Style="{StaticResource TableRowShade}"
Margin="0" />
<Rectangle
Grid.Column="1"
Style="{StaticResource TableRowShadeALT}"
Margin="0" />
<Rectangle
Grid.Column="2"
Style="{StaticResource TableRowShade}"
Margin="0" />
<Rectangle
Grid.Column="3"
Style="{StaticResource TableRowShadeALT}"
Margin="0"
HorizontalAlignment="Stretch"
Height="110" />
<!-- End Shading -->
<Button Name="DeleteButton"
Grid.Column="0"
Style="{StaticResource ImageButton}"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}}, Path=DataContext.DeleteRuleButtonClickedCommand}"
ToolTip="Delete this mapping rule"
local:AttachedImage.Image="{StaticResource CancelImageSource}" >
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource DeleteButtonConverter}">
<Binding ElementName="TableName" Path="Text" />
<Binding ElementName="FieldNumber" Path="Text" />
</MultiBinding>
</Button.CommandParameter>
</Button>
<TextBox
Name="TableName"
Grid.Column="1"
VerticalAlignment="Center"
Margin="4,0,4,5"
Height="20"
Text="{Binding TableName, Mode=TwoWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
FocusManager.IsFocusScope="True"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch" />
<TextBox
Name="FieldNumber"
Grid.Column="2"
VerticalAlignment="Center"
Margin="4,0,4,5"
Height="20"
Width="50"
Text="{Binding FieldNumber, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
TextAlignment="Center"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch" />
<TextBox
Name="DynamicSQL"
Grid.Column="3"
VerticalAlignment="Center"
Margin="4,0,4,5"
Text="{Binding DynamicSQL, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Height="100"
Width="303"/>
</Grid>
</DataTemplate>
<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="ContentTemplate" Value="{StaticResource MappingRuleTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource MappingRuleSelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
.....
<ListBox Name="QuarterlyCompanyFieldMappingControl"
ItemContainerStyle="{StaticResource ContainerStyle}"
ItemsSource="{Binding QuarterlyCompanyMappings.FieldMappingCollection, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
AlternationCount="2"
BorderThickness="0"
Padding="0">

Local WPF C# Programming

i have a project on C# WPF, im just following the instruction and copying and pasting the code from the instruction. Im on the last part but unfortunately i received error in this part:
<local:SearchPanel Grid.Column="1" Grid.Row="1"
Visibility="{Binding ElementName=MyMovieDatabaseWindow, Path=IsSearchPaneVisible, Converter={StaticResource VisibilityConverter}}"/>
The errors are:
Error 1 ''local' is an undeclared prefix. Line 138, position 10.' XML is not valid. C:\Documents and Settings\xxxxx\Desktop\WPF Training Lab 1\WPF Training Lab 1\WPF Training Lab 1\MainWindow.xaml 138 10 WPF Training Lab 1
Error 2 The type 'local:SearchPanel' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built. C:\Documents and Settings\xxxx\Desktop\WPF Training Lab 1\WPF Training Lab 1\WPF Training Lab 1\MainWindow.xaml 138 10 WPF Training Lab 1
Here's the FULL CODE:
MainWindow.xaml
<Window x:Class="WPF_Training_Lab.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="My Movie Database" Height="Auto" Width="Auto"
Icon="Res\Reel.png"
Background="{x:Static SystemColors.ControlDarkDarkBrush}"
x:Name="MyMovieDatabaseWindow" xmlns:local="clr-namespace:WPF_Training_Lab_1">
<Window.Resources>
<ControlTemplate x:Key="NavButtonTemplate" TargetType="{x:Type Button}">
<Label Content="{TemplateBinding Property=Content}">
<Label.Resources>
<Style TargetType="{x:Type Label}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<TextBlock> <TextBlock.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextDecorations" Value="Underline"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</TextBlock.Resources>
<ContentPresenter/>
</TextBlock>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="TextBlock.TextDecorations" Value="Underline" />
</Style>
</Label.Resources>
</Label>
</ControlTemplate>
<!-- Custom Commands -->
<RoutedUICommand x:Key="Command_NavigateToSearch" Text="Search"/>
<RoutedUICommand x:Key="Command_NavigateToReview" Text="Review"/>
<RoutedUICommand x:Key="Command_NavigateToMaintain" Text="Maintain"/>
<!-- Shared ToolTips-->
<ToolTip x:Key="TT_NavigateToSearch" Content="Navigate to the Search screen"/>
<ToolTip x:Key="TT_NavigateToReview" Content="Navigate to the Review screen"/>
<ToolTip x:Key="TT_NavigateToMaintain" Content="Navigate to the Maintain screen"/>
<!-- Images/Icons -->
<Image x:Key="Image_Cut" Source="Res\Cut.png" Height="12" Width="12"/>
<Image x:Key="Image_Copy" Source="Res\Copy.png" Height="12" Width="12"/>
<Image x:Key="Image_Paste" Source="Res\Paste.png" Height="12" Width="12"/>
</Window.Resources>
<Window.CommandBindings>
<CommandBinding x:Name="CommandBinding_Close" Command="Close" CanExecute="CommandBinding_Close_CanExecute" Executed="CommandBinding_Close_Executed"/>
<CommandBinding x:Name="CommandBinding_NavToSearch" Command="{StaticResource Command_NavigateToSearch}" CanExecute="CommandBinding_NavToSearch_CanExecute" Executed="CommandBinding_NavToSearch_Executed"/>
<CommandBinding x:Name="CommandBinding_NavToReview" Command="{StaticResource Command_NavigateToReview}" CanExecute="CommandBinding_NavToReview_CanExecute" Executed="CommandBinding_NavToReview_Executed"/>
<CommandBinding x:Name="CommandBinding_NavToMaintain" Command="{StaticResource Command_NavigateToMaintain}" CanExecute="CommandBinding_NavToMaintain_CanExecute" Executed="CommandBinding_NavToMaintain_Executed"/>
</Window.CommandBindings>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="115"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Menu Bar -->
<Menu Height="25" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
<MenuItem Header="_File">
<MenuItem Command="{StaticResource Command_NavigateToSearch}" Header="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}" ToolTip="{StaticResource TT_NavigateToSearch}" />
</MenuItem>
<MenuItem Header="_Edit">
<MenuItem Command="{StaticResource Command_NavigateToSearch}" Header="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}" ToolTip="{StaticResource TT_NavigateToSearch}"/>
<MenuItem Command="{StaticResource Command_NavigateToSearch}" Header="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}" ToolTip="{StaticResource TT_NavigateToSearch}"/>
<MenuItem Command="{StaticResource Command_NavigateToSearch}" Header="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}" ToolTip="{StaticResource TT_NavigateToSearch}"/>
</MenuItem>
<MenuItem Header="_Navigate">
<MenuItem Command="{StaticResource Command_NavigateToSearch}" Header="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}" ToolTip="{StaticResource TT_NavigateToSearch}"/>
<MenuItem Command="{StaticResource Command_NavigateToSearch}" Header="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}" ToolTip="{StaticResource TT_NavigateToSearch}"/>
<MenuItem Command="{StaticResource Command_NavigateToSearch}" Header="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}" ToolTip="{StaticResource TT_NavigateToSearch}"/>
</MenuItem>
</Menu>
<Border Background="AliceBlue" CornerRadius="5" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Stretch" Margin="4,4,2,4">
<StackPanel HorizontalAlignment="Stretch">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0" Cursor="Arrow" Background="Transparent">
<Image Source="Res\search.png" Height="14" Width="14" Margin="0,0,5,0"/>
<Button Template="{StaticResource NavButtonTemplate}" HorizontalAlignment="Center" Command="{StaticResource Command_NavigateToSearch}"
Content="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}"
ToolTip="{StaticResource TT_NavigateToSearch}"
/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0" Background="Transparent" Cursor="Arrow">
<Image Source="Res\settings_32.png" Height="14" Width="14" Margin="0,0,5,0"/>
<Button Template="{StaticResource NavButtonTemplate}" HorizontalAlignment="Center" Command="{StaticResource Command_NavigateToReview}"
Content="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}"
ToolTip="{StaticResource TT_NavigateToReview}" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0" Cursor="Hand" Background="Transparent">
<Image Source="Res\gear.png" Height="14" Width="14" Margin="0,0,5,0"/>
<Button Template="{StaticResource NavButtonTemplate}" HorizontalAlignment="Center" Command="{StaticResource Command_NavigateToMaintain}"
Content="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}"
ToolTip="{StaticResource TT_NavigateToMaintain}" />
</StackPanel>
</StackPanel>
</Border>
<!-- User controls representing each of the panes the user can navigate to. -->
<local:SearchPanel Grid.Column="1" Grid.Row="1" Visibility="{Binding ElementName=MyMovieDatabaseWindow, Path=IsSearchPaneVisible, Converter={StaticResource VisibilityConverter}}"/>
</Grid>
</Window>
SearchPanel.xaml
<UserControl x:Class="WPF_Training_Lab_1.SearchPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:converters="clr-namespace:WPF_Training_Lab_2.Converters"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<RoutedUICommand x:Key="Command_Search" Text="Search"/>
<BooleanToVisibilityConverter x:Key="boolToVisibilityConverter"/>
<converters:NotBooleanToVisibilityConverter x:Key="notTheBoolConverter"/>
<converters:ThumbnailConverter x:Key="thumbnailConverter"/>
<converters:TextConverter x:Key="textConverter" />
<converters:TmdbImageConverter x:Key="tmdbImageConverter" />
<converters:CastMemberConverter x:Key="castMemberConverter"/>
<!-- Template defining the appearance of each item in the results listbox -->
<DataTemplate x:Key="SearchResultTemplate">
<DataTemplate.Resources>
<ToolTip x:Key="tooltip">
<ToolTip.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Click to see details for the movie "/>
<TextBlock Text="{Binding DbMovie.Name}"/>
</StackPanel>
</ToolTip.Content>
</ToolTip>
</DataTemplate.Resources>
<Border CornerRadius="5" Background="LightSteelBlue" BorderBrush="SteelBlue" BorderThickness="1" Margin="2,2,5,2"
MinWidth="285" ToolTip="{StaticResource tooltip}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2" Margin="3" VerticalAlignment="Top" Width="92">
<Image.Source>
<BitmapImage UriSource="{Binding DbMovie.Images, Converter={StaticResource thumbnailConverter}, ConverterParameter='poster'}"
DecodePixelWidth="92"/>
</Image.Source>
</Image>
<TextBlock Margin="3" Grid.Column="1" Grid.Row="0" Text="{Binding DbMovie.Name}" FontWeight="Bold" TextWrapping="Wrap" />
<TextBlock Margin="5,3,3,3" Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Text="{Binding DbMovie.Overview, Converter={StaticResource textConverter}}" VerticalAlignment="Top" />
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
<UserControl.CommandBindings>
<CommandBinding x:Name="CommandBinding_Search" Command="{StaticResource Command_Search}" CanExecute="CommandBinding_SearchCanExecute"
Executed="CommandBinding_SearchExecuted"/>
</UserControl.CommandBindings>
<Grid>
<!-- Search pane at top -->
<Border x:Name="SearchPane" HorizontalAlignment="Stretch" Margin="2,4,4,4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="4"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" CornerRadius="5" Background="AliceBlue" Padding="5">
<Grid>
<Image Source="Res\Search.png" Height="48" Width="48" HorizontalAlignment="Left"/>
<StackPanel Margin="0,0,0,5" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal" Margin="5">
<Label Content="Title: " FontWeight="Bold"/>
<TextBox x:Name="txtTitleSearch" Width="150" KeyUp="txtTitleSearch_KeyUp" ToolTip="Enter a movie title to search for" />
<Label Content="Year: " FontWeight="Bold" Margin="15,0,0,0"/>
<TextBox x:Name="txtYearFilter" Width="50" KeyUp="txtTitleSearch_KeyUp" ToolTip="Enter a year to narrow search results"/>
</StackPanel>
<Button x:Name="btnSearch" Content="Search" Margin="0,10,0,0" Width="75" Command="{StaticResource Command_Search}"
ToolTip="Click to perform the search"/>
</StackPanel>
<Image Source="Res\Search.png" Height="48" Width="48" HorizontalAlignment="Right"/>
</Grid>
</Border>
</Grid>
</Border>
<Border Grid.Row="2" CornerRadius="5" Background="AliceBlue" Padding="3">
<Grid VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" MinWidth="300"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="0.7*"/>
</Grid.ColumnDefinitions>
<Border CornerRadius="5" BorderBrush="LightSteelBlue" BorderThickness="1" Margin="0,0,3,0" Grid.Column="0"
Visibility="{Binding HasSearchResults, Converter={StaticResource boolToVisibilityConverter}}">
<ListBox ItemsSource="{Binding SearchResults}" ItemTemplate="{StaticResource SearchResultTemplate}" Grid.Column="0" Margin="-5" MinHeight="250" MinWidth="250" Width="Auto" Background="Transparent" x:Name="lstSearchResults" Padding="5"
BorderBrush="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalContentAlignment="Stretch"/>
</Border>
<Border CornerRadius="5" BorderBrush="LightSteelBlue" BorderThickness="1" Margin="0,0,3,0" Grid.Column="0"
Visibility="{Binding HasSearchResults, Converter={StaticResource notTheBoolConverter}}">
<Label VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="16">No Results</Label>
</Border>
<GridSplitter Grid.Column="1" Grid.Row="2" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightSteelBlue" />
</Grid>
</Border>
</Grid>
</UserControl>
How can i fix it? Thanks!
You are missing an "xmlns:local" attribute at the top of your XAML file. This should look something like:
xmlns:local="clr-namespace:YourAppNamespace"
Where YourAppNamespace is the namespace that contains the SearchPanel class.

Resources