Develop Reference

Item Selection from list of items By Scrolling Left and Right

I want to select next item on scrolling right or left
<StackPanel >
<StackPanel Width="500">
<ItemsControl ItemsSource="{Binding Devices}" Focusable="False" >
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}" >
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled"
CanContentScroll="True" Template="{DynamicResource ScrollViewerControlTemplate1}"
helpers:ScrollBarVisibilityHelper.IsEnabled="True" >
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Views:DeviceMiniView DataContext="{Binding}" Margin="10,5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Style>
<Style TargetType="{x:Type ItemsControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
Value="0">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<TextBlock Text="No devices" FontSize="24" FontWeight="Bold"
Margin="0,0,0,20" Foreground="#FFF8F5F5" />
<TextBlock Text="Click Menu->Reconnect" FontSize="24"
FontWeight="Bold" Margin="0,0,5,0" Foreground="White" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
Value="1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsControl.Style>
</ItemsControl>
</StackPanel>
I am trying to scroll my item present in scrollViwer, One item once from the list of items, But unfortunately i didn't succeed,
i new with WPF,
I have Xaml:
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}" >
<ScrollViewer
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Disabled"
CanContentScroll="True"
Template="{DynamicResource ScrollViewerControlTemplate1}"
helpers:ScrollBarVisibilityHelper.IsEnabled="True"
>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
Can anybody help me out i have tried to change the style, templet and also tried with collectionview and observable collection in view model.
I would be thankfull.

Name header for context menu

The title seems easier than first thought, but I have a context menu that is bound to a list of items. I want to be able to display a title for the context menu to access the list. Currently it just shows up as blank and then allows me to view the list, however I need it to display a title "Add Existing Properties". Also if someone can help me with my image problem that would be much appreciated :). Instead of the first one having the image name I want that to display the name "Add Existing Properties"
<DataTemplate x:Key="AddNodeTemplate">
<Border BorderThickness="1" Background="#F7F7F7">
<Border.BorderBrush>
<DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#F7F7F7">
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,50,50"/>
<RectangleGeometry Rect="50,50,50,50"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.BorderBrush>
<StackPanel>
<Button x:Name="ButtonAdd" Click="ButtonAdd_Click" Height="30" Width="130">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#F7F7F7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="Images/icon_plus.bmp" HorizontalAlignment="Left" Margin="5,0,0,0"/>
<TextBlock Text="Add Property" HorizontalAlignment="Center" Grid.Column="1" VerticalAlignment="Center" Foreground="LightGray" FontStyle="Italic" FontSize="12"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#F7F7F7"/>
</Style>
</Button.Style>
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Add Exisiting Properties" ItemsSource="{Binding Path=AvailableProperties}">
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding Name}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Icon">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Image Width="12" Height="12" Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}" Margin="3" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</MenuItem.Resources>
</MenuItem>
<MenuItem Header="Upscale well logs"/>
<MenuItem Header="Upscale well_top attributes"/>
<MenuItem Header="Upscale point attributes"/>
<MenuItem Header="Calculate"/>
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</Border>
</DataTemplate>
What is displayed

This style <Style TargetType="MenuItem"> in fact also applies on the top level MenuItem (the one you hardcodedly set its Header to Add Exisiting Properties). You need to use a Trigger to filter that out based on the Role property. All the sub menu items have Role of SubMenuItem, so it should be like this:
<Style TargetType="MenuItem">
<Style.Triggers>
<Trigger Property="Role" Value="SubMenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
<!-- ... -->
</Style>
Edit: About the Icon, you explicitly set it to a DataTemplate which is not rendered, instead it uses the string returned by ToString() (hence the text System.Windows.DataTemplate in place of the icon). You can just remove DataTemplate like this:
<!-- define a non-shared resource of Image -->
<Style TargetType="MenuItem">
<Style.Resources>
<Image x:Key="img" x:Shared="False" Width="12" Height="12" Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}"
Margin="3" VerticalAlignment="Center"/>
</Style.Resources>
<!-- ... -->
</Style>
<Setter Property="Icon" Value="{StaticResource img}"/>
Final solution:
<Style TargetType="MenuItem">
<Style.Resources>
<Style TargetType="ContentPresenter">
<Style.Triggers>
<Trigger Property="ContentSource" Value="Icon">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Setter Property="Icon" Value="{Binding Icon,
Converter={StaticResource ImageToSourceConverter}}"/>
<!-- ... -->
</Style>

you can either use
`
<MenuItem Header="Add Exisiting Properties" ItemsSource="{Binding Path=AvailableProperties}">
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{TemplateBinding Header}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
or
<MenuItem Header="Add Exisiting Properties" ItemsSource="{Binding Path=AvailableProperties}">
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Header}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
`

How to change itemsControl stackpanel background color

Says I have a list of 10 items someList, I will show them on my page via itemsControl like below:
<ItemsControl DataContext="{Binding [someViewModel]}"
BorderBrush="Black"
ItemSource="{Binding someList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Background="Green">
<StackPanel MouseDown="{Binding Path=DataContext.someCommand,
RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ItemsControl}}}"
Command Parameter="{Binding someID}">
<TextBlock Text="{Binding something}">
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I do able to trigger someCommand method and I do able to pass in someID as input parameter. Now I'm wondering how to update the stackPanel background color, making it looks like "selected". Meaning now all item will have a green background, when I click on one of the stackpanel, that stackpanel should change background to red and change others back to green

If you want to use ItemsControl you can change ItemTemplate to RadioButton with custom ControlTemplate that will include Border which Background would change to Red when IsChecked == true:
<ItemsControl DataContext="{Binding [someViewModel]}" BorderBrush="Black" ItemSource="{Binding someList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<RadioButton Content="{Binding something}" GroupName="radioGroup">
<RadioButton.Template>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border Background="Green" x:Name="PART_Border">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="PART_Border" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</RadioButton.Template>
</RadioButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
However I don't see a reason why you cannot use ListBox with SelectionMode=Single (default value) and change Template of ListBoxItem:
<ListBox DataContext="{Binding [someViewModel]}" BorderBrush="Black" ItemSource="{Binding someList}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Background="Green" x:Name="PART_Border">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="PART_Border" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
or even do something like this, without changing Template:
<ListBox DataContext="{Binding [someViewModel]}" BorderBrush="Black" ItemSource="{Binding someList}">
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Green"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
In WPF it's generally much easier to pick a control that has functionality that you need and style it to look like you want then do this the other way round

why not do something like this
<DataTemplate>
<Border BorderThickness="1" Background="Green" x:Name="MyBorder">
<StackPanel MouseDown="{Binding Path=DataContext.someCommand,
RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ItemsControl}}}"
Command Parameter="{Binding someID}">
<TextBlock Text="{Binding something}">
</StackPanel>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected}" Value="true">
<Setter TargetName="MyBorder" Property="Background" Value="Black" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

WPF listbox empty item template not showing

I am try to list some data in WPF listbox control. It is the first time I am using DataTemplate in WPF. Everything is working fine except when there is no data it is not showing 'No items to display'. Below is my code.
<ListBox Name="itemsCtrl" Background="#FFE5E5E5" BorderBrush="{x:Null}" SelectionChanged="itemsCtrl_SelectionChanged" Style="{StaticResource ListStyle}">
<ListBox.Resources>
<!-- Set SelectedItem Background here -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#C2C2C2"/>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver,
RelativeSource={RelativeSource
Self}}"
Value="True">
<Setter Property="Background"
Value="#C2C2C2" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="ListBox" x:Key="ListStyle" BasedOn="{StaticResource {x:Type ListBox}}">
<Style.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Items.Count}"
Value="0"
>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock>No items to display</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Cursor="Hand" Name="hoverDataTemplate" Orientation="Horizontal" Width="370" VerticalAlignment="Top" Height="40" HorizontalAlignment="Left" >
<Label VerticalContentAlignment="Center" HorizontalAlignment="Left" Padding="15,5,5,5" Width="330" Content="{Binding Path=EVENT_TITLE}" FontSize="12"/>
<Image Height="28" Source="/pr;component/Images/black_next.png" Stretch="Fill" Width="28" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I am binding data source as shown below.
itemsCtrl.ItemsSource = dao.SelectDataTable(cmd).DefaultView;
When I set the style property of ListBox as ListStyle it is throwing an error
'Provide value on 'System.Windows.StaticResourceExtension' threw an exception.' Line number '292' and line position '22'.
Can anybody point out how to make it correct?
Thanks in advance.

i have used below code and it's work fine
my xaml code
<ListBox Grid.ColumnSpan="2" Grid.Row="1" Height="32" HorizontalAlignment="Left" Margin="160,2,0,0" Name="listBox1" VerticalAlignment="Top" Width="120" Style="{StaticResource Dhaval}"/>
Style look like
<Style x:Key="Dhaval" TargetType="{x:Type ListBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Items.Count}" Value="0">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock>No items to display</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>

Disable blue border for selected Listview item

I have a ListView with Horizontal WrapPanel as its ItemsPanelTemplate.
I want to get rid of the blue background for selected item. It is visible only on the left of the selected item.
There are many similar question on SO and I tried a lot of the solutions and none of them worked.
This is what I have already tried:
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<!-- Foreground for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black"/>
<!-- Background for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
<!--SelectedItem without focus-->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="Control.MouseDoubleClick" Handler="HandleSelectedItemDoubleClick"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="2" CenterX="12" CenterY="12" />
</Setter.Value>
</Setter>
<Setter Property="Panel.ZIndex" Value="150"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="210" Margin="15" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>

You need to overwrite the SystemColors.HighlightBrushKey for the ListView to be Transparent (or whatever color you want)
I typically put this in the ListView.Resources so it only applies to the specific ListView, and not all ListViews in my application
<ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</ListView.Resources>
Its very close to what you have in your code already, but you need to set it for the ListView.Resources, not ListViewItem.Resources

To remove all default styling (hovering, selecting, etc.) just define a custom Template for the ItemContainer (not the Item itself):
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Found on MSDN Forum

This is what did it for me:
<UserControl.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical" Background="Transparent" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectedTemplate">
<StackPanel Orientation="Vertical" Background="LightGray" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="ContainerStyle">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=ItemTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>

The simplest way to do this is to set the background to {x:Null} when the item is selected, using a trigger.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="{x:Null}" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>