Binding a Command inside a Style - wpf

I'm currently working on a WPF application that uses MVVM. I've got a ListBox with a style set up to make it display like a RadioButtonList as follows:
<Style x:Key="RadioButtonList" TargetType="{x:Type ListBox}">
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}" >
<Setter Property="Margin" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Background="Transparent">
<RadioButton Focusable="False" IsHitTestVisible="False" IsChecked="{TemplateBinding IsSelected}" Content="{Binding Path=DisplayName}" Command="{Binding ElementName=ShippingWindow, Path=DataContext.ShipOtherMethodSelected}">
</RadioButton>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
<ListBox Name="lbShipOtherMethodOptions" Style="{StaticResource RadioButtonList}" ItemsSource="{Binding Path=ShipOtherMethodOptions}" Margin="13,74,366,282" />
What I'm trying to do is bind a command to the RadioButton, so that I can fire off an event when a selection is made. I've got the following code in my viewmodel, but I can't seem to get it to fire:
private ICommand shipOtherMethodSelected;
public ICommand ShipOtherMethodSelected
{
get
{
return shipOtherMethodSelected ??
(shipOtherMethodSelected = new RelayCommand(param => ShipOpenItems(), param => true));
}
}
private void ShipOpenItems()
{
MessageBox.Show("GOT HERE");
}
I'm pretty new to WPF and MVVM, so I'm probably missing something obvious. Can anyone point me in the right direction?
EDIT:
Per jberger's suggestion, I put in some code that I attempted that didn't work. Setting breakpoints in that section didn't get tripped, nor did the message box show up.
EDIT 2:
So after inspecting the DataContext on the sender, it turns out it was pointing to the object that I'm binding the RadioButton to, and not my viewmodel. I updated the code above (adding in an x:Name to my window and updating the Command binding), and now I'm getting the event to fire when its initially bound, but it doesn't fire when I select a value. Seems like we're getting really close now.

The ShipOtherMethodSelected is in your (main) ShippingVM NOT your ShipItemVM, so you need to set
Command="{Binding ElementName=ShippingWindow, Path=DataContext.ShipOtherMethodSelected}"
where ShippingWindow is the x:Name of an element "above" the ListBoxItem
Also, the Focusable="False" IsHitTestVisible="False" is denying the click. Remove the setters.

Related

Custom control's properties not changing when used in a template

I have created a custom control (inherits Control) that exposes a single enumerated DependencyProperty. The default control template renders differently based on the selected value for the property using Triggers to turn elements on/off. The control works great when placed directly into a UserControl for viewing in the UI. However, the point of the control is to exist as part of a large composite control so it is also used in the ControlTemplate of another custom control. When I do so, changes to the dependency property are not recognized by the control. I verified this by adding a PropertyChangedCallback to the dependency property and setting a break point which is never hit.
For example, when I use "CustomControl" in a template like this:
<ControlTemplate>
<my:CustomControl EnumProperty="EnumValue" />
</ControlTemplate>
The EnumProperty (which is a DependencyProperty) is not changed to "EnumValue" and it remains the default value. And, as I said, a breakpoint in the PropertyChangedCallback for the DP is never called.
What am I missing?
UPDATE
Here is a cleansed version of my control:
public class CustomControl : Control
{
static CustomControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl), new FrameworkPropertyMetadata(typeof(CustomControl)));
}
public StandardIcon()
: base()
{
BorderType = BorderType.None;
}
public static readonly DependencyProperty BorderTypeProperty = DependencyProperty.Register("BorderType", typeof(BorderType), typeof(CustomControl), new PropertyMetadata(BorderType.None));
public BorderType BorderType
{
get { return (BorderType)GetValue(BorderTypeProperty); }
set { SetValue(BorderTypeProperty, value); }
}
}
<Style TargetType="{x:Type local:CustomControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomControl}">
<Border x:Name="Rectangle"
BorderBrush="{TemplateBinding Foreground}"
BorderThickness="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<ContentPresenter ContentSource="Content" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="BorderType" Value="Rectangle">
<Setter Property="BorderThickness" TargetName="Rectangle" Value="2" />
</Trigger>
<Trigger Property="BorderType" Value="RoundedRectangle">
<Setter Property="BorderThickness" TargetName="Rectangle" Value="2" />
<Setter Property="CornerRadius" TargetName="Rectangle" Value="5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And this is how it is being used within another control (notice that it is in a DataTemplate and not a ControlTemplate as I originally indicated).
<Style TargetType="{x:Type local:OtherControl}">
<Setter Property="FontFamily" Value="{x:Static theme:StandardFonts.FontFamily}" />
<Setter Property="FontSize" Value="{x:Static theme:StandardFonts.FontSizeXS}" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<local:CustomControl BorderType="{Binding TemplatedParent.BorderType, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="{Binding TemplatedParent.Foreground, RelativeSource={RelativeSource TemplatedParent}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then it is used like this:
<controls:OtherControl Foreground="Red" BorderType="Rectangle" />
The Foreground property IS changing as expected. When I change the Foreground of the OtherControl, the Foreground of the CustomControl is changed. But the BorderType property is not being respected - it always renders with the default BorderType.None value.
The parent of your ControlTemplate needs to have something for your CustomControl to bind to. Then, you bind the CustomControl in your template to the parent.
In the following example, I'm using a Border to template a Button, which binds its BorderBrush to the Button's Background:
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding Background}" />
</ControlTemplate>
Replace Button with your "large composite control" and Border with my:CustomControl and you should be set...

Why does an implicit TextBlock style get applied when binding Label.Content to a non-string, but not a string?

I was looking at this question, and discovered that binding Label.Content to a non-string value will apply an implicit TextBlock style, however binding to a string does not.
Here's some sample code to reproduce the problem:
<Window.Resources>
<Style TargetType="Label">
<Setter Property="FontSize" Value="26"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="26"/>
<Setter Property="Margin" Value="10"/>
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding SomeString}" Background="Red"/>
<Label Content="{Binding SomeDecimal}" Background="Green"/>
</StackPanel>
</Grid>
Where the code for the bound values are
SomeDecimal = 50;
SomeString = SomeDecimal.ToString();
And the end result looks like this, with the Margin property from the implicit TextBlock style getting applied to the Label bound to a non-string only:
Both labels get rendered as
<Label>
<Border>
<ContentPresenter>
<TextBlock />
</ContentPresenter>
</Border>
</Label>
When I check out the VisualTree with Snoop, I can see that it looks exactly the same for both elements, except the 2nd TextBlock applies the Margin from the implicit style, while the first does not.
I've used Blend to pull out a copy of the default Label Template, but don't see anything strange there, and when I apply the template to both my labels, the same thing happens.
<Label.Template>
<ControlTemplate TargetType="{x:Type Label}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Label.Template>
It should also be noted that setting a default ContentTemplate to a TextBlock does make both items render without the implicit style, so it must have something to do with when WPF tries to render a non-string value as part of the UI.
<Window.Resources>
<Style TargetType="Label">
<Setter Property="FontSize" Value="26"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="TemplatedStyle" TargetType="Label" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding }"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="26"/>
<Setter Property="Margin" Value="10"/>
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding SomeString}" Background="Red"/>
<Label Content="{Binding SomeDecimal}" Background="Green"/>
<Label Content="{Binding SomeString}" Background="Red"
Style="{StaticResource TemplatedStyle}"/>
<Label Content="{Binding SomeDecimal}" Background="Green"
Style="{StaticResource TemplatedStyle}"/>
</StackPanel>
</Grid>
What is the logic that causes a non-string inserted into the UI to be drawn using an implicit TextBlock style, but a string inserted into the UI does not? And where does this occur at?
EDIT: (maybe move this to the bottom?)
And I poked a bit more - and I think I got to the crux of the problem (w/ emphasis on 'I think')
Put this into some Button1_Click or something (again, we need to go 'lazy' on this - as we need the visual tree constructed - we cannot do it on 'Loaded' as we just made the templates - this required better initialization technique true, but it's just a test so who cares)
void Button_Click(object sender, EventArgs e)
{
var insideTextBlock = FindVisualChild<TextBlock>(_labelString);
var value = insideTextBlock.GetProperty<bool>("HasImplicitStyleFromResources"); // false
value = insideTextBlock.GetProperty<bool>("ShouldLookupImplicitStyles"); // true
var boundaryElement = insideTextBlock.TemplatedParent; // ContentPresenter and != null
insideTextBlock = FindVisualChild<TextBlock>(_labelDecimal);
value = insideTextBlock.GetProperty<bool>("HasImplicitStyleFromResources"); // true
value = insideTextBlock.GetProperty<bool>("ShouldLookupImplicitStyles"); // true
boundaryElement = insideTextBlock.TemplatedParent; // == null !!
As mentioned here Implicit styles in Application.Resources vs Window.Resources?
The FindImplicitStyleResource (in FrameworkElement) uses something like...
boundaryElement = fe.TemplatedParent;
And seems that if there is no TemplatedParent (and due to the ways
the TextBlock is constructed within the DefaultTemplate) - there
are no 'boundaries' set - and search for implicit resources / styles -
propagates all the way.
Original Answer: (read this first if you just arrived)
(#dowhilefor and #Jehof already touched on the main things)
I'm not sure this is an 'answer' as such - it's still a guess work - but I needed more space to explain what I think is going on.
You can find the 'ContentPresenter source' code on the web - it's easier than using reflector - just 'google' for it, I'm not posting it here for the obvious reasons :)
It's about the ContentTemplate that is chosen for the ContentPresenter (and in this order)...
ContentTemplate // if defined
ContentTemplateSelector // if defined
FindResource // for typeof(Content) - eg if defined for sys:Decimal takes that one
DefaultTemplate used internally by the presenter
...specific templates are chosen based on typeof(Content)
And indeed it doesn't have anything to do with the Label but any ContentControl or control template that uses ContentPresenter. Or you could bind to resource etc.
Here is a repro of what's going on inside - my goal was to reproduce similar behavior for 'strings' or any type of content.
In XAML just 'name' the labels (and it isn't a typo, a deliberately put strings in both to level the playing field sort of)...
<Label Name="_labelString" Content="{Binding SomeString}" Background="Red"/>
<Label Name="_labelDecimal" Content="{Binding SomeString}" Background="Green"/>
And from code behind (the minimal code that sort of mimics what presenter does):
note: I did it on Loaded as I needed access to the presenter implicitly created
void Window1_Loaded(object sender, RoutedEventArgs e)
{
FrameworkElementFactory factory = new FrameworkElementFactory(typeof(TextBlock));
factory.SetValue(TextBlock.TextProperty, new TemplateBindingExtension(ContentProperty));
var presenterString = FindVisualChild<ContentPresenter>(_labelString);
presenterString.ContentTemplate = new DataTemplate() { VisualTree = factory };
// return;
var presenterDecimal = FindVisualChild<ContentPresenter>(_labelDecimal);
presenterDecimal.ContentTemplate = new DataTemplate();
// just to avoid the 'default' template kicking in
// this is what 'default template' does actually, the gist of it
TextBlock textBlock = new TextBlock();
presenterDecimal.SetProperty(typeof(FrameworkElement), "TemplateChild", textBlock);
textBlock.Text = presenterDecimal.Content.ToString();
First part (for _labelString) does what 'text' template does for strings.
If you return right after that - you'll get the two same looking boxes, no implicit template.
Second part (for _labelDecimal) mimics the 'default template' which is invoked for the 'decimal'.
End result should behave the same as the original example. We
constructed the templates as for the string and decimal - but we
can put anything in the content (if it makes sense of course).
As to why - my guess is something like this (though far from certain - somebody will jump in with something more sensible I guess)...
As per this link FrameworkElementFactory
This class is a deprecated way to programmatically create templates,
which are subclasses of FrameworkTemplate such as ControlTemplate or
DataTemplate; not all of the template functionality is available when
you create a template using this class. The recommended way to
programmatically create a template is to load XAML from a string or a
memory stream using the Load method of the XamlReader class.
And I'm guessing it doesn't invoke any defined styles for the TextBlock.
While the 'other template' (default template) - actually constructs the TextBlock and somewhere along those lines - it actually picks up the implicit style.
Frankly, that's as much as I was able to conclude, short of going through the entire WPF 'internals' and how/where actually styles get applied.
I used this code Finding control within WPF itemscontrol for FindVisualChild.
And the SetProperty is just the reflection - for that one property we need access to to be able to do all this. e.g.
public static void SetProperty<T>(this object obj, string name, T value) { SetProperty(obj, obj.GetType(), name, value); }
public static void SetProperty<T>(this object obj, Type typeOf, string name, T value)
{
var property = typeOf.GetProperty(name, BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.Public);
property.SetValue(obj, value, null);
}
After going through this question and valuable comments from all, I have done some research on TextBlock Styling.
To my understanding the problem here is not with the Label or TextBlock, it is with the contentpresenter and the controls which use contentpresenter like Label, button and ComboBoxItem.
One of the properties of content presenter from MSDN : http://msdn.microsoft.com/en-us/library/system.windows.controls.contentpresenter.aspx
" If there is a TypeConverter that converts the type of Content to a string, the ContentPresenter uses that TypeConverter and creates a TextBlock to contain that string. The TextBlock is displayed "
In the example above, For SomeString Content presenter is converting it into textblock and applying the TextBlock margin (10) along with Label margin (10) making it 20.
In order to avoid this scenario you need to override the TextBlock style in contentpresenter as shown below
<ContentPresenter >
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="5" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
Following is the changes to your code.
<Window.Resources>
<Style TargetType="Label">
<Setter Property="FontSize" Value="26"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Grid>
<Rectangle Fill="{TemplateBinding Background}" />
<ContentPresenter >
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="5" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="26"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Foreground" Value="Pink" />
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding SomeString}" Background="Red" />
<Label Content="{Binding SomeDecimal}" Background="Green"/>
</StackPanel>
</Grid>
</Window>
This explanation is just based on my understanding. Let me know your comments.
Thanks
According to my comment i add more information to the question. Its not a direct answer, but provides additional information to the described problem.
The XAML below will display the described behavior directly in the Designer of Visual Studio and i have narrowed it down to the ContentPresenter, which seems to be source of the problem. The style gets applied to the first both ContentPresenter (intPresenter and boolPresenter), but not the last that uses a string as Content (stringPresenter).
<Window.Resources>
<system:Int32 x:Key="intValue">5</system:Int32>
<system:Boolean x:Key="boolValue">false</system:Boolean>
<system:String x:Key="stringValue">false</system:String>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="26" />
<Setter Property="Margin" Value="10" />
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal">
<ContentPresenter x:Name="intPresenter"
VerticalAlignment="Center"
Content="{StaticResource intValue}" />
<ContentPresenter x:Name="boolPresenter"
VerticalAlignment="Center"
Content="{StaticResource boolValue}" />
<ContentPresenter x:Name="stringPresenter"
VerticalAlignment="Center"
Content="{StaticResource stringValue}" />
</StackPanel>
</Grid>
In the debugger i have analyzed that the stringPresenter uses the DefaultStringTemplate while the intPresenter does not.
Its also interesting that the Language of the intPresenter is set, while by the stringPresenter its not.
And the implementation of the method looks something like that (taken from dotPeek)
private bool IsUsingDefaultStringTemplate
{
get
{
if (this.Template == ContentPresenter.StringContentTemplate || this.Template == ContentPresenter.AccessTextContentTemplate)
return true;
DataTemplate dataTemplate1 = ContentPresenter.StringFormattingTemplateField.GetValue((DependencyObject) this);
if (dataTemplate1 != null && dataTemplate1 == this.Template)
return true;
DataTemplate dataTemplate2 = ContentPresenter.AccessTextFormattingTemplateField.GetValue((DependencyObject) this);
return dataTemplate2 != null && dataTemplate2 == this.Template;
}
}
The StringContentTemplate and AccessTextTemplate are using a FrameworkElementFactory to generate the Visuals.

WPF Dependency Properties Settings binding doesnt update

Ive already been through about 30 different posts and changed how I handle this and it gets closer but still wont work.
I have a Custom Button control in a library, that I am using in Main application. The button displays, handles mouse overs and such, but the dependency property for the text, (or Icon but Ill get to that later) wont update. When I set up the Dependency property with a default value that the only value it displays, it wont display anyhting I set in the designer, or through code.
public static readonly DependencyProperty FileTextProperty;
//Constructor
static FileButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(FileButton), new FrameworkPropertyMetadata(typeof(FileButton)));
// Initialize dependency properties
FileTextProperty = DependencyProperty.Register("FileText", typeof(string), typeof(FileButton), new UIPropertyMetadata ("Default File Text"));
}
/// <summary>
/// The Filename text displayed by the button.
/// </summary>
[Description("The text displayed by the button."), Category("Common Properties")]
public string FileText
{
get { return (string)GetValue(FileTextProperty); }
set { SetValue(FileTextProperty, value); }
}
here is the XAML (Somewhat abbreviated)
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="GradientStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:FileButton}">
<Grid x:Name="main" MinHeight="38" MaxHeight="38">
<Grid Margin="4,0" Name="DisplayMain">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="fileText" HorizontalAlignment="Stretch" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=local:FileButton, AncestorLevel=1}, Path=FileText}" TextWrapping="NoWrap" VerticalAlignment="Top" Grid.Column="0" Margin="4,0,0,0" TextTrimming="WordEllipsis"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ControlTemplate.Resources>
<Grid x:Name="LayoutRoot" Margin="0">
<local:FileButton Style="{DynamicResource GradientStyle}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I run it the only data displayed on the button is the defaulted text. Even though I know I am setting the Dependency Property. I even when as far as using the binding Path=FileText.Length in the XAML to make sure its reaching it and it is, and it displayed 0 on the button, so it seems like Im not setting the data, even when I manually create the button, and insert it into a container, it still doesnt display what I set it to. (Yes I stepped into it in the debugger to make sure)
Any ideas, its been most of the day trying to figure this out.
PLEASE HELP THANKS!
You don't need to create a custom button for this. You can put any content you want inside a Button:
<Grid x:Name="LayoutRoot">
<Button VerticalAlignment="Top" Margin="132,140,168,0" Height="54.96">
<StackPanel>
<Image Source="{Binding Icon}"></Image>
<TextBlock Text="{Binding FileName}" HorizontalAlignment="Left"/>
</StackPanel>
</Button>
</Grid>
Where FileName is a property in a viewmodel you create, which you set to be the DataContext of your Window (or grid or button).
With this MVVM setup, when you change FileName in your code, it will automatically display it in your button.
You can still style the button any way you want.
I'm not sure why you're using RelativeSource binding instead of TemplateBinding
With all else being the same, I would do this
<TextBlock Text="{TemplateBinding FileText}" />

make Listbox items in WPF not selectable

I have a listbox in WPF, and when they select an item, it shows an ugly colors
Can I make all the items non-selectable?
If you don't need selection, use an ItemsControl rather than a ListBox
Add Focusable property as false in ListBoxItem style:
<Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
<!-- Possibly other setters -->
<Setter Property="Focusable" Value="False" />
</Style>
Please use this inside your listbox. I found this very elegant solution
<ListBox ItemsSource="{Binding YourCollection}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Focusable" Value="False"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
If you dont want them selectable then you probably dont want a listview.
But if this is what you really need then you can do it with a style:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border
Name="Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="#DDDDDD"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<ListBox>
<ListBoxItem>One</ListBoxItem>
<ListBoxItem>Two</ListBoxItem>
<ListBoxItem>Three</ListBoxItem>
</ListBox>
</Grid>
</Page>
Look at the IsSelected Trigger. You can make the border a different colour so it is not "Ugly" or set it to transparent and it will not be visible when selected.
Hope this helps.
There's an even easier way: set ListBox property IsHitTestVisible="False". This prevents all the items in the list from receiving mouse events. This has the advantage of stopping the highlighting as you mouse-over as well.
It works for me in WP 7.1.
A simple way to do this (using the answer from viky above) is to set the selected index to -1 in the SelectionChanged(), as follows.
public void OnListView_SelectionChanged(Object sender, RoutedEventArgs e)
{
if (null != sender && sender is ListView)
{
ListView lv = sender as ListView;
lv.SelectedIndex = -1;
}
}
Better to avoid events, it's more elegant and without side effects the Style tag.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsEnabled" Value="False"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
... what you want as a source ...
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
you can handle SelectionChanged event of ListBox and unselect the selected item in the event handler.
You can also make disabled Listbox, which will give you static, non-interactive listbox.
<ListBox IsEnabled="False"/>
I think this is the solution as simple as possible.
In my case I had templated ListboxItems with a Textblock and a ComboBox. The only "active" should be the Combo...
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled"
CanContentScroll="True" />
<ItemsControl>
....here my content....
</Itemscontrol>
</ScrollViewer>
did work for me as expected.
BR,
Daniel
You can also handle PreviewMouseDown event
And to prevent tap you can set KeyboardNavigation.TabNavigation="None"
<ListView x:Name="Cards"
.....
PreviewMouseDown="CardMonthsDescriptors_OnPreviewMouseDown"
KeyboardNavigation.TabNavigation="None"
>
...
private void Cards_OnPreviewMouseDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}

WPF: Disable ListBox, but enable scrolling

Been banging my head against this all morning.
Basically, I have a listbox, and I want to keep people from changing the selection during a long running process, but allow them to still scroll.
Solution:
All the answers were good, I went with swallowing mouse events since that was the most straight forward. I wired PreviewMouseDown and PreviewMouseUp to a single event, which checked my backgroundWorker.IsBusy, and if it was set the IsHandled property on the event args to true.
If you look in to the control template of the ListBox, there is a ScrollBar and ItemsPresenter inside. So Make the ItemsPresenter Disabled and you will get this easily. Use the bellow Style on the ListBox and you are good to go.
<Style x:Key="disabledListBoxWithScroll" TargetType="{x:Type ListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
<ScrollViewer Padding="{TemplateBinding Padding}" Focusable="false">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" IsEnabled="False" IsHitTestVisible="True"/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On the ListBox use the Style
<ListBox Style="{DynamicResource disabledListBoxWithScroll}" ..... />
I found that putting a disabled ListBox in a ScrollViewer with auto scrolling enabled gives the desired effect.
The trick is to not really disable. Disabling will lock out all messages from the scroll box.
During the long operation, gray out the text in the list box using its .ForeColor property and swallow all mouse clicks. This will simulate disabling the control and allow scrolling unimpeded.
While it's for Silverlight, maybe this blog post would help you get going in the right direction? Silverlight No Selection ListBox and ViewBox
I used this solution, it's really easy and works perfectly:
For every SurfaceListBoxItem item you put in the Listbox, do this:
item.IsHitTestVisible = false;
This worked best for me. It's easy and whole code is in XAML which is IMO very neat.
<ListBox ItemsSource="{Binding MySource}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<DataTrigger Binding="{Binding IsEditing}" Value="True">
<Setter Property="IsEnabled" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEditing}" Value="False">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Another option worth considering is disabling the ListBoxItems. This can be done by setting the ItemContainerStyle as shown in the following snippet.
<ListBox ItemsSource="{Binding YourCollection}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsEnabled" Value="False" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
If you don't want the text to be grey you can specify the disabled color by adding a brush to the style's resources with the following key: {x:Static SystemColors.GrayTextBrushKey}. The other solution would be to override the ListBoxItem control template.
This question is pretty much the same as this one: There ain't ListBox.SelectionMode=“None”, is there another way to disable selection in a listbox? and my answer is the same.
I found a very simple and straight forward solution working for me, I hope it would do for you as well
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Focusable" Value="False"/>
</Style>
A complete answer using http://www.codeproject.com/Tips/60619/Scrollable-Disabled-ListBox-in-WPF
The Style:
<Style TargetType="{x:Type local:CustomListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomListBox}">
<Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
<ScrollViewer IsEnabled="True">
<ItemsPresenter IsEnabled="{Binding Path=IsEnabledWithScroll, RelativeSource={RelativeSource TemplatedParent}}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The class
public class CustomListBox : ListBox
{
public bool IsEnabledWithScroll
{
get { return (bool)GetValue(IsEnabledWithScrollProperty); }
set { SetValue(IsEnabledWithScrollProperty, value); }
}
public static readonly DependencyProperty IsEnabledWithScrollProperty =
DependencyProperty.Register("IsEnabledWithScroll", typeof(bool), typeof(CustomListBox), new UIPropertyMetadata(true));
}
Then instead of setted IsEnabled on the ListBox, use IsEnabledWithScroll instead. Scrolling will work if the listbox is enabled or disabled.
There seem to be many ways to skin this particular cat. I found that by setting IsHitTestVisible on the ItemsContainerStyle in XAML I got exactly what I needed:
<ListBox IsHitTestVisible="true" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsHitTestVisible" Value="False" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Well, I found a sweet way to provide this feature. What I did is that in the DataTemplate of the listBox I binded the parent layout enable property with the boolean flag using Page as Source.
Step 1 - Provide the x:Name attribute to the page. If the page you are using is extended with base page than make sure that the base page is not an abstract class and has an default constructor without any arguments.
<Page x:Class="OPMS.Views.Registration"
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"
x:Name="MainPage"
d:DesignWidth="1024"
Title="Registration"
>
Step 2 - Use the Page as a source for the DataTemplate parent layout items IsEnabled property
<ListBox Grid.Row="2"
ItemsSource="{Binding TestGroups}"
AlternationCount="2"
Padding="0"
Margin="10,5,10,10"
>
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}"
IsChecked="{Binding IsSelected}"
IsEnabled="{Binding Source={x:Reference MainPage}, Path=DataContext.BindingVariableHere}"
/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Resources