WPF Grid, remove highlight of cell click - wpf

I have a window like this
<Window x:Class="Värvivärten_Sendscreen.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Sendscreen"
mc:Ignorable="d"
Title="Sendscreen" Height="768" Width="1024" Background="white" ResizeMode="NoResize" KeyDown="Window_KeyDown" WindowStartupLocation="Manual" FontFamily="Ubuntu" Foreground="#2B2525">
<Window.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</Window.Resources>
<DockPanel>
<DockPanel DockPanel.Dock="Left" VerticalAlignment="Center" Height="768" >
<StackPanel HorizontalAlignment="Left" Margin="20,0">
<Image Source="/logo.png" Width="156" Margin="-170,20,0,0"/>
<StackPanel Orientation="Horizontal" Margin="60,50,0,0" >
<Image Source="/estonia.png" Width="40" Height="40"></Image>
<TextBlock TextWrapping="WrapWithOverflow" Width="300" FontSize="14" Padding="20,0,0,0">Smart text
</TextBlock>
<Label></Label>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="60,20,0,0" >
<Image Source="/united-kingdom.png" Width="40" Height="40"></Image>
<TextBlock TextWrapping="WrapWithOverflow" Width="300" FontSize="14" Padding="20,0,0,0">Smart text
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="60,20,0,0" >
<Image Source="/latvia.png" Width="40" Height="40"></Image>
<TextBlock TextWrapping="WrapWithOverflow" Width="300" FontSize="14" Padding="20,0,0,0">Smart text
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="60,20,0,0" >
<Image Source="/russia.png" Width="40" Height="40"></Image>
<TextBlock TextWrapping="WrapWithOverflow" Width="300" FontSize="14" Padding="20,0,0,0">Smart text
</TextBlock>
</StackPanel>
<StackPanel HorizontalAlignment="Left" Margin="60,100">
<Image Source="/qr.png" Width="82"></Image>
<Label FontWeight="Bold">Smart text</Label>
<Label Margin="0,-10">Smart text</Label>
</StackPanel>
</StackPanel>
</DockPanel>
<StackPanel DockPanel.Dock="Bottom">
<Label FontWeight="Bold" FontSize="48" HorizontalContentAlignment="Center" Margin="0,50,0,50" >Smart text</Label>
<ListView x:Name="TvBox" BorderThickness="0" Background="white" VerticalAlignment="Center" Panel.ZIndex="4">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="115*"></ColumnDefinition>
<ColumnDefinition Width="115*"></ColumnDefinition>
<ColumnDefinition Width="115*"></ColumnDefinition>
<ColumnDefinition Width="115*"></ColumnDefinition>
<ColumnDefinition Width="115*"></ColumnDefinition>
<ColumnDefinition Width="115*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="115*"></RowDefinition>
<RowDefinition Height="115*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column"
Value="{Binding ColumnIndex}" />
<Setter Property="Grid.Row"
Value="{Binding RowIndex}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="0">
<Image Source="{Binding ImageData}" Margin="0" Width="115" MouseDown="Image_MouseDown" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Image x:Name="BigImage" Width="400" Margin="0,40,0,0"></Image>
</StackPanel>
</DockPanel>
</Window>
All of the small images that are bound are clickable by this. I would like to remove the background highlight and border from them when clicked. How can I do so?

Related

Powershell WPF style template for disabled ListBox

I have a powershell script which at some point creates a WPF form for some basic input from the user.
I have a ListBox with CheckBoxes where user selects necessary options, but it is disabled by default, and user needs to do some actions before it enables. As you can see from below XAML, the overall design is dark, so default disabled styling for ListBox looks pretty ugly. How do I need to change below XAML, so that when disabled, I can control at least the background? I know that I need to create a style template and add trigger that switches styles when ListBox is disabled, but I tried several approaches found online and none of them work.
Here's the XAML I'm using
<Window x:Name="MyLittleFormMainWindow" x:Class="MyLittleForm.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MyLittleForm"
mc:Ignorable="d"
Title="My Little Form" Height="450" Width="800" FontFamily="OCRB" FontSize="14" Opacity="0.8" Background="#33000000" Foreground="Lime" BorderBrush="#05000000" WindowStyle="ToolWindow" BorderThickness="0" ResizeMode="NoResize">
<Grid Margin="0,10,4,0">
<Grid.RowDefinitions>
<RowDefinition Height="33*"/>
<RowDefinition Height="173*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18*"/>
<ColumnDefinition Width="61*"/>
</Grid.ColumnDefinitions>
<Button x:Name="buttonGetFiles" Content="Press to enable" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="160" Height="48" Background="#F2323232" Foreground="#FFFDA100" FontSize="18" Grid.Column="0" Grid.Row="0"/>
<ListBox x:Name="checkBoxList" HorizontalAlignment="Left" Margin="10,10,10,10" VerticalAlignment="Top" Width="160" Height="200" ItemsSource="{Binding MyItemsListProperty}" SelectionMode="Multiple" Background="#F2323232" Foreground="#FFFDA100" Grid.Column ="0" Grid.Row="1" IsEnabled="False" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="2">
<CheckBox IsChecked="{Binding isChecked}" BorderBrush="#FF000A64" Background="Lime" Foreground="Lime" Content="{Binding Content}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label x:Name="textLabel" Content="My Little Form" Grid.Column="1" Grid.Row ="0" HorizontalAlignment="Right" Margin="10,10,10,10" VerticalAlignment="Top" FontFamily="OCR A Extended" FontSize="42" Foreground="Lime" Height="48" />
</Grid>
</Window>
You have to define a style for ItemsPanelTemplate of the ListBox only.
Try this one as an example:
<Grid Margin="0,10,4,0">
<Grid.RowDefinitions>
<RowDefinition Height="33*"/>
<RowDefinition Height="173*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18*"/>
<ColumnDefinition Width="61*"/>
</Grid.ColumnDefinitions>
<Button x:Name="buttonGetFiles" Content="Press to enable" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="160" Height="48" Background="#F2323232" Foreground="#FFFDA100" FontSize="18" Grid.Column="0" Grid.Row="0"/>
<ListBox x:Name="checkBoxList"
HorizontalAlignment="Left"
Margin="10,10,10,10"
VerticalAlignment="Top" Width="160" Height="200"
ItemsSource="{Binding MyItemsListProperty}"
SelectionMode="Multiple"
Foreground="#FFFDA100"
Grid.Column ="0" Grid.Row="1"
IsEnabled="False" >
<ListBox.Style>
<Style TargetType="ListBox">
<Setter Property="Background" Value="#F2323232"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled}" Value="False">
<Setter Property="Background" Value="#F2323232"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel >
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Background" Value="#F2323232"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}, Path=IsEnabled}" Value="False">
<Setter Property="Background" Value="#AA323232"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="2">
<CheckBox IsChecked="{Binding isChecked}" BorderBrush="#FF000A64" Background="Lime" Foreground="Lime" Content="{Binding Content}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label x:Name="textLabel" Content="My Little Form" Grid.Column="1" Grid.Row ="0" HorizontalAlignment="Right" Margin="10,10,10,10" VerticalAlignment="Top" FontFamily="OCR A Extended" FontSize="42" Foreground="Lime" Height="48" />
</Grid>

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.

LabeledPieChart: Style overrides DataTemplate

I have customized the template of LabeledPieChart (source: Bea) in a Style. Then I created a DataTemplate for the Slices of the LabeledPieChart. Both the style and the DataTemplate works great if they are alone. If they are together the Style overrides the DataTemplate that he has no effect. Is it possible to combine these two?
Here is my Code (The Style and the DataTemplate are in Window.Resources):
Style:
<Style TargetType="customControls:LabeledPieChart" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="customControls:LabeledPieChart">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*" />
<ColumnDefinition Width="9*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<dataVis:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" Margin="0,5,0,3"/>
<Grid Grid.Row="1" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<chartPrmtvs:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
<Grid Canvas.ZIndex="-1" Background="Transparent" />
<Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="0" />
</chartPrmtvs:EdgePanel>
</Grid>
</Grid>
<dataVis:Legend x:Name="Legend" Style="{TemplateBinding LegendStyle}" Title="{TemplateBinding LegendTitle}"
BorderThickness="0" Background="Transparent" FontSize="15" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
DataTemplate:
<DataTemplate DataType="{x:Type local:City}" >
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel Background="White" Orientation="Horizontal">
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type customControls:PieChartLabel}}, Path=FormattedRatio}" VerticalAlignment="Center" Margin="5,0,5,0" />
<TextBlock Text="- " />
<TextBlock Text="{Binding Path=Population}" Margin="5,0,5,0" />
<TextBlock Text="- " />
<TextBlock Text="{Binding Name}" Margin="0,0,5,0"/>
</StackPanel>
</Border>
</DataTemplate>
LabeldPieChart:
<Grid>
<customControls:LabeledPieChart
x:Name="labeledPieChart"
Title="Population of Puget Sound Cities"
Height="500" Width="700"
Grid.Row="3"
BorderBrush="Gray"
>
<customControls:LabeledPieChart.Series>
<customControls:LabeledPieSeries
x:Name="labeledPieSeries"
ItemsSource="{Binding}"
IndependentValuePath="Name"
DependentValuePath="Population"
IsSelectionEnabled="True"
LabelDisplayMode="Auto"
/>
</customControls:LabeledPieChart.Series>
</customControls:LabeledPieChart>
</Grid>

Turning a grid into a button

I have a 2 column grid that I want to wrap with a <Button> now when I do that it totally screws the layout of the grid, how do I disable the style of the button so that the grid is clickable via the button but it looks the same.
When I start I have the following xaml
<Grid>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180*" />
<ColumnDefinition Width="296*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding image}" Margin="10,10,10,10"/>
<StackPanel Grid.Column="1">
<TextBlock Grid.Column="1" Text="{Binding hoursAgo}" FontSize="16" FontWeight="Light" FontStyle="Italic"></TextBlock>
<TextBlock FontSize="26.667" TextDecorations="Underline" Text="{Binding title}" TextWrapping="Wrap" Height="40" Width="295" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="#FF3253B8" Canvas.Top="22" Grid.Column="1" >News Title Goes here</TextBlock>
<TextBlock FontSize="21.333" Text="{Binding description}" TextWrapping="Wrap" d:LayoutOverrides="VerticalAlignment" Grid.Column="1" />
</StackPanel>
</Grid>
</Grid>
If I use expression blend to convert to a button it messes the source a bit, which is not what I want
<UserControl.Resources>
<Style x:Key="SelectedEntry" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180*" />
<ColumnDefinition Width="296*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding image}" Margin="10,10,10,10"/>
<StackPanel Grid.Column="1">
<TextBlock FontSize="26.667" TextDecorations="Underline" Text="{Binding title}" TextWrapping="Wrap" Height="40" Width="295" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="#FF3253B8" Canvas.Top="22" Grid.Column="1" ><Run Text="News Title Goes here"/></TextBlock>
<TextBlock FontSize="21.333" Text="{Binding description}" TextWrapping="Wrap" d:LayoutOverrides="VerticalAlignment" Grid.Column="1" />
</StackPanel>
</Grid>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontStyle" Value="Italic"/>
</Style>
</UserControl.Resources>
<Button Content="{Binding hoursAgo}" Style="{StaticResource SelectedEntry}"/>
now the description is not showing in the grid.
Open Blend, right click the Grid that you want to turn into a Button and select Make Into Control.
Then in the popup window, select which control you want it to turn to, in your case, a Button. :) That's it.

WPF Image stretch to fill doesn't stretch to the bounds of it's parents

Here's my XAML and how it looks like:
<Window x:Class="GameLenseWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="350" MinHeight="450" MinWidth="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.15*" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Stretch="Fill" Source="Image/topBarBg.png" />
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock Text="Platform"
Foreground="White"
FontFamily="Georgia"
FontSize="15"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<ComboBox x:Name="cmbPlatform"
Margin="10"
FontFamily="Georgia"
FontSize="15"
MinHeight="30"
MinWidth="140"
VerticalAlignment="Center"
VerticalContentAlignment="Center" SelectionChanged="cmbPlatform_SelectionChanged">
<ComboBoxItem>All Platforms</ComboBoxItem>
<ComboBoxItem>Playstation 3</ComboBoxItem>
<ComboBoxItem>XBox 360</ComboBoxItem>
<ComboBoxItem>Wii</ComboBoxItem>
<ComboBoxItem>PSP</ComboBoxItem>
<ComboBoxItem>DS</ComboBoxItem>
</ComboBox>
</StackPanel>
<Image x:Name="imgAbout" Grid.Row="0" Source="Image/about.png"
Height="16" HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0 0 10 0" />
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<!-- SelectedItem with focus -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent" />
<!-- SelectedItem without focus -->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="Transparent" />
<!-- SelectedItem text foreground -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black" />
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120" Margin="0 10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Stretch="UniformToFill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
<StackPanel Grid.Row="0" Grid.Column="1" Margin="12 0 0 0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title:" FontFamily="Arial" Foreground="White"/>
<TextBlock Text="{Binding Title}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Release Date:" FontFamily="Arial" Foreground="White" />
<TextBlock Text="{Binding ReleaseDate}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<TextBlock Text="Synopsis" FontFamily="Arial" Foreground="White" />
<TextBox Background="#454545" Foreground="White" TextWrapping="Wrap" Text="{Binding Synopsis}" MaxHeight="73" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
I just want to games image to stretch to fill the canvas bounds, which is inside of the rounder border.
Why is it not doing this?
The problem is that you have the images within a canvas. Basically, any time you put an element in a Canvas panel, you are disregarding the entire layout system. Elements within a canvas do not participate in layout at all. What you want to do is replace the Canvas element with a plain Grid element (you don't need to define rows or columns, it will default to a single row/column.)
EDIT
And actually looking more closely at what you are trying to do, you'll need to make some slight tweaks. Try this.
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4">
<Grid>
<Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
<Image Source="Image/youtube.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="20" Width="20" />
</Grid>
</Border>
your problem is here
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
you have a BorderThickness Attribute which puts the black border around the image, just remove it or set it to 0 and this will solve the problem.
so your code will be
<Border BorderBrush="#202020" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
or
<Border BorderBrush="#202020" BorderThickness="0" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>

Resources