Powershell WPF style template for disabled ListBox - wpf

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>

Related

WPF double line on the top of listbox

I am new to wpf. I need to have a window that list all accounts added. But my application shows a double line below the "Accounts". Not sure what caused this. could someHow to fix this? Here is my xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="StackPanel1" Grid.Row="0" HorizontalAlignment="Left" Height="150" VerticalAlignment="Top" Width="444">
<TextBlock x:Name="AddAccountTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Height="60" Width="369" Text="Add account to allow for simple access to your company resources
" SnapsToDevicePixels="True"/>
<Button x:Name="AddAccount" Content="Add Account" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" RenderTransformOrigin="0.466,0.977" IsCancel="True" Height="40" Foreground="White" Background="Blue" Click="OnAddAccount"/>
</StackPanel>
<StackPanel x:Name="StackPanel2" Grid.Row="2" HorizontalAlignment="Left" Height="154" Width="444">
<TextBlock x:Name="AccountsTextBlock" TextWrapping="Wrap" Text="Accounts" Height="25" Width="68" FontSize="16" FontFamily="Tahoma"/>
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Height" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border" BorderBrush="Gray" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Background" Value="LightSkyBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" Width="100" Source="{Binding Path=imagePath}" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" Text="{Binding Path=userInfo}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
You may remove the borders of the ListBox by setting the BorderThickness property:
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top" Margin="100"
BorderThickness="0">
You may set it to 1,0,1,0 to remove only the top and bottom borders. The order is left, top, right, bottom.

Mouse Jerky Over Controls In Multi Monitor Setup

We have a window which displays a message in the centre and with a semi transparent background as follows:
<Window x:Class="Dialogs.Touch.MessageWindow" Style="{DynamicResource DialogWindow}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="clr-namespace:I.GUI.Controls.WPF"
Title="MessageWindow" WindowState="Maximized" AllowsTransparency="True" WindowStartupLocation="CenterScreen" PreviewKeyDown="Window_PreviewKeyDown">
<Window.Resources>
<ResourceDictionary x:Name="StyleDictionary">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/TouchStyle.xaml"/>
<ResourceDictionary Source="../Styles/DialogsStyle.xaml"/>
<ResourceDictionary Source="../../Styles/GUIStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Window.Background>
<SolidColorBrush x:Name="WindowBrush" Color="#88000000"/>
</Window.Background>
<ContentControl>
<Border Margin="20" Width="460" MaxHeight="1000" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{DynamicResource WindowBorder}" >
<Grid Margin="0" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="{Binding ElementName=MessageTextBlock, Path=Height, Mode= OneWay}" />
<RowDefinition Height="90" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="IconColumn">
<ColumnDefinition.Style>
<Style TargetType="{x:Type ColumnDefinition}">
<Setter Property="Width" Value="58"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=IconImage, Path=Visibility}" Value="Collapsed" >
<Setter Property="Width" Value="0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Style="{DynamicResource WindowHeaderBorder}">
<DockPanel>
<i:TouchButton DockPanel.Dock="Right" TouchButtonStyle="Quit" Content="X" Width="35" x:Name="Button1" />
<TextBlock VerticalAlignment="Center" Style="{DynamicResource LargeTextBlock}" Foreground="{DynamicResource LightTextColour1}" Text="Title" Name="TitleTextBlock"></TextBlock>
</DockPanel>
</Border>
<Image Name="IconImage" Width="48" Height="48" Grid.Row="1" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Left" RenderOptions.BitmapScalingMode="Fant" Source="/SI.GUI;component/Images/warning.ico"></Image>
<TextBlock Margin="10,5,5,5" Grid.Row="1" Grid.Column="2" Style="{DynamicResource MediumTextBlock}" Text="Message" Name="MessageTextBlock" TextWrapping="Wrap"></TextBlock>
<StackPanel Grid.ColumnSpan="2" Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Bottom" FlowDirection="RightToLeft">
<i:TouchButton TouchButtonStyle="Negative" VerticalAlignment="Bottom" Content="Cancel" HorizontalAlignment="Right" Height="70" Width="150" x:Name="CancelButton"/>
<i:TouchButton TouchButtonStyle="Positive" VerticalAlignment="Bottom" Content="OK" HorizontalAlignment="Right" Height="70" Width="150" x:Name="OkButton"/>
</StackPanel>
</Grid>
</Border>
</ContentControl>
On one of our test machines when the mouse is placed over the message controls in the centre of the window which contain the message and buttons et (see border tags) the mouse cursor becomes very jerky.
It moves normally over the window background.
This only occurs when the system is in multi monitor mode. When only one monitor is used the cursor moves normally.
The system is running Windows XP.
Thanks

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.

Alternate background color in Listview XAML

I'm using a listView based on itemTemplate.
So i need in my template to alternate the background color :
- fist row: white
- second row:gray
- third row: white
- forth: gray
this is my template:
<DataTemplate x:Key="ItemFlight" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="#28AADB" Margin="2">
<Image Source="{Binding Path=IsArrival, Converter={StaticResource BooleanToImageDisplayConverter}}" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
</Border>
<Grid Grid.Column="1" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding FlightName}" FontWeight="Bold" Grid.Column="0" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding ArrivalOrDepartDateTime, Converter={StaticResource DateTimeConverter}}" FontWeight="Bold" Grid.Column="0" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding Terminal, Converter={StaticResource StringUpperConverter}}" Grid.Column="1" Grid.Row="0" Margin="10" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityReverseConverter}}" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding CityInfo.Name}" Grid.Column="1" Grid.Row="0" Margin="10" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding DepartureTime}" Grid.Column="1" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding CityInfo.Name}" Grid.Column="2" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityReverseConverter}}"/>
<TextBlock Text="{Binding Terminal, Converter={StaticResource StringUpperConverter}}" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Column="2" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding ArrivalTime}" Grid.Column="2" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding Status}" Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" Margin="15" Style="{StaticResource MyTextBlockStyle}" Foreground="#EA6A1E" FontSize="20" TextWrapping="Wrap" />
</Grid>
</Grid>
</DataTemplate>
How Can I do this please??
I tried this and it works for me.
<Window x:Class="TryResponses.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:TryResponses"
xmlns:system="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<vm:MainWindowViewModel x:Key="MainWindowViewModel" />
</Window.Resources>
<Grid Background="LightGray" DataContext="{StaticResource MainWindowViewModel}">
<Grid.Resources>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="LightBlue" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate DataType="system:String">
<!-- put your data template here -->
</DataTemplate>
</Grid.Resources>
<ListView ItemsSource="{Binding Items}" AlternationCount="2" />
</Grid>
I hope this will help.
Regards
Claude
You should use AlternationCount property and it works on ListBox,ListView or any other control that inherits from ItemsControl.
The property definition and two examples are included at
https://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.alternationcount%28v=vs.110%29.aspx)
To view more clearly the selected lines, you can try this : (don't take care about the colors and final render, i've not spent the necessary time to make it sexy)
<Grid DataContext="{StaticResource MainWindowViewModel}">
<Grid.Resources>
<local:FalseToCollapsedConverter x:Key="FalseToCollapsedConverter" />
</Grid.Resources>
<ListView ItemsSource="{Binding Items}" AlternationCount="2" HorizontalContentAlignment="Stretch">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid x:Name="line">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentControl Content="{Binding .}" Margin="4" />
<TextBlock Grid.Column="1" Text="V" Margin="4" Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem, Mode=FindAncestor}, Converter={StaticResource FalseToCollapsedConverter}}" />
<Border Grid.ColumnSpan="2" Background="#5500FF00"
BorderBrush="Blue" BorderThickness="2"
Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem, Mode=FindAncestor}, Converter={StaticResource FalseToCollapsedConverter}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter TargetName="line" Property="Background" Value="#CCCCFF" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter TargetName="line" Property="Background" Value="#CCFFCC" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
</ListView>
</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.

Resources