I have a class called Question that represents a question and it's answer. I have an application that renders an ObservableCollection of Question objects. Each Question is rendered as a StackPanel that contains a TextBlock for the question verbiage, and a TextBox for the user to enter in an answer. The questions are rendered using an ItemsControl, and I have initially set the Style of the Questions's StackPanel using a StaticResource key called 'IncorrectQuestion' (defined in UserControl.Resources section of the page). In the UserControl.Resources section, I've also defined a key calld 'CorrectQuestion' which I need to somehow apply to the Question's StackPanel when the user correctly answers the question. My problem is I'm not sure how to dynamically change the Style of the StackPanel, specifically within the constraints of a ViewModel class (i.e. I don't want to put any style selection code in the View's code-behind). My Question class has an IsCorrect property which is accurately being set when the correction is answered. I'd like to somehow reflect the IsCorrect value in the form of a Style selection. How do I do that?
Using a value converter is a solution.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<local:BoolToStyleConverter x:Key="Correctness">
<local:BoolToStyleConverter.FalseValue>
<Style TargetType="TextBox">
<Setter Property="Background" Value="Salmon" />
</Style>
</local:BoolToStyleConverter.FalseValue>
<local:BoolToStyleConverter.TrueValue>
<Style TargetType="TextBox">
<Setter Property="Background" Value="AliceBlue" />
</Style>
</local:BoolToStyleConverter.TrueValue>
</local:BoolToStyleConverter>
</Grid.Resources>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Question}" />
<TextBox x:Name="Answer" Text="{Binding Answer, Mode=TwoWay}"
Style="{Binding IsCorrect, Converter={StaticResource Correctness}}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
You can find the basis for the BoolToStyleConverter is based on this blog post.
Created as:-
public class BoolToStyleConverter : BoolToValueConverter<Style> { }
Related
I have a WPF application in .NET 3.5 SP1 which is using TabControl.
In that we have TabItems, which in turn have their Styles to determine currently displayed items.
Let's say we have a TabItem named Books, now Books will have three stages of display:
1. Loading results,
2. Displaying results,
3. Displaying no results - i.e. nothing found.
<TabControl>
<TabItem Header="Books"/>
<TabItem Header="DVD's"/>
...
</TavControl>
Now I have 5 TabItems which let's say represent "DVD's", "Blu-Rays", "CD's", "Books" and "Comics".
<TabItem Header="Books">
<Control>
<Control.Resources>
<Style TargetType="Control">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<ListView ItemsSource="{Binding Books}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!-- Assign different Visuals depending on the current state of the app, i.e. Loading, No results, results found
<DataTrigger .../>
</Style.Triggers>
</Style>
</Control.Resources>
</Control>
</TabItem>
Underneath the TabItem I have a TextBlock to display number of currently found results:
<TextBlock>
<TextBlock.Text>
<MultiBinding StringFormat="Displaying {0} records for your Shop ({1})" Converter="{StaticResource tstMVC}">
<Binding ElementName="Tc" Path="SelectedValue"/>
<Binding Path="ShopId" FallbackValue="Liverpool"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
Converter is there for me to check what values are passed in the MultiBinding.
ISSUE:
When user selects a tab item I would like to display current number of the items displayed but I can't locate the ListView in the Control, as that's the Current Content of the TabItem.
I have tried TabControl.SelectedItem, SelectedValue and still can't find Current ItemsSource.Count.
Thanks in advance
UPDATE:
I have tried both of the solutions big thanks to #Sheridan and #pushpraj!
Unfortunately I haven't used either of them, instead I used ListView inside of the TabItem and then accessed it with this code:
<TabControl Name="Tc">
<TabItem><ListView ItemsSource="{Binding Books}"/></TabItem>
...
</TabControl>
<TextBlock Text="{Binding ElementName=Tc, Path=SelectedItem.Content.Items.Count}"/>
This way Content of my TextBlock changes every time user selects different Tab.
P.S. Nevertheless I wouldn't have done it without evaluation of both answers.
if you have separate collection classes for all you entities you may use the following approach
define data templates for your collection classes
eg
<DataTemplate DataType="{x:Type l:BookCollection}">
<ListView ItemsSource="{Binding}" />
</DataTemplate>
xaml
<TabControl x:Name="Tc">
<TabItem Header="Books"
Content="{Binding Books}" />
<TabItem Header="DVD's"
Content="{Binding DVDs}" />
</TabControl>
or if you do not have separate collections then use DataTemplate as follows
<TabControl x:Name="Tc">
<TabControl.ItemTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabItem Header="Books"
Content="{Binding Books}" />
<TabItem Header="DVD's"
Content="{Binding DVDs}" />
</TabControl>
then the binding to get the selected tab's items count will be
<TextBlock Text="{Binding SelectedItem.Content.Count, ElementName=Tc}" />
In WPF, we generally work with data elements rather than UI elements. By that, I mean that it is customary to data bind data elements from our code behind or view models to the UI elements in the views, UserControls and Windows.
Therefore, if you have a data collection property named Books in your code behind or view model, then you can simply refer to that collection to find out how many items are in it, rather than trying to find it via the UI controls:
<ListView ItemsSource="{Binding Books}" />
You could even expose the count of items as a separate property and data bind to it directly:
public ObservableCollection<Book> Books
{
get { return books; }
set
{
books = value;
NotifyPropertyChanged("Books");
NotifyPropertyChanged("BookCount");
}
}
public int BookCount
{
get { return Books.Count; }
}
UPDATE >>>
In response to your latest comment, you can find out how to access UI elements from within a ControlTemplate from the How to: Find ControlTemplate-Generated Elements page on MSDN. In short though, you need to access the element that has the ControlTemplate applied (the relevant TabItem in your case) and then you can use the FrameworkTemplate.FindName Method to find the internally declared elements. Take this example from the linked page:
// Finding the grid that is generated by the ControlTemplate of the Button
Grid gridInTemplate = (Grid)myButton1.Template.FindName("grid", myButton1);
// Do something to the ControlTemplate-generated grid
MessageBox.Show("The actual width of the grid in the ControlTemplate: "
+ gridInTemplate.GetValue(Grid.ActualWidthProperty).ToString());
I'm trying to organize my NavBarItem elements in each NavBarGroup into a tree view, using the following code:
<dxn:NavBarControl DataContext="{Binding}" ItemsSource="{Binding Bars}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<dxn:NavBarControl.Resources>
<Style TargetType="dxn:NavBarGroup">
<Setter Property="Header" Value="{Binding DisplayText}"/>
<Setter Property="Content" Value="{Binding MenuItems}"/>
<Setter Property="DisplaySource" Value="Content"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TreeView x:Name="MenuView" ItemsSource="{Binding}" >
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=ChildItems}" >
<ContentControl>
<dxn:NavBarItem
DataContext="{Binding}"
Content="{Binding ItemText}" PreviewMouseUp="MenuItemOnPreviewMouseUp" Initialized="FrameworkContentElement_OnInitialized" />
</ContentControl>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</dxn:NavBarControl.Resources>
<dxn:NavBarControl.View>
<dxn:ExplorerBarView/>
</dxn:NavBarControl.View>
</dxn:NavBarControl>
The groups are binding correctly, and I am only populating one group, "Personnel" for debugging reasons, with the mini-hierarchy:
"Personnel"
--"Employees"
----"Contractors"
------"Time-sheets"
I get the correct structure in the treeview, but each item only has the text that would result from calling NavBarItem.ToString(). When I handle the NavBarItem.Initialized even, the sender argument, being a NavBarItem actually has the correct value in its Content property, so the binding isn't all broken, but I don't know what is, and am seeking help here.
First of all it is necessary to notice that NavBarGroup and NavBarItem are non-visual elements. Thus if you use them as the ContentPresenter content only simple strings will be shown (just like you see in your case).
The second thing is that multi-level hierarchy is not supported in NavBar (only group level and item level).
So if you need to show more than two levels you can use TreeView as you used in your sample but put TreeViewItems to the content template instead of putting NavBarItems; If you need only two levels you can use NavBarControl.ItemsSource and NavBarGroup.ItemsSource properties to populate layout.
I have the following ListBox:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
SelectionChanged="ListBoxContainerSelectionChanged"
ItemsSource="{Binding Movies}"
ItemContainerStyle="{StaticResource HeaderListBoxItemStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<Controls:MoviesItemControl Header="{Binding Title}"
Detail="{Binding FormattedDescription}"
Rating="{Binding Rating}"
Opacity="{Binding IsSuppressed, Converter={StaticResource DimIfTrueConverter}}"
IsEnabled="{Binding IsSuppressed, Converter={StaticResource InverseBooleanConverter}}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'm trying to set the Disabled state of ListBoxItems that are 'Suppressed' (Movies with no description found). I have a property which I am able to bind to my individual control, but I want them to not be selectable in the actual list. (And use the disabled state included in my ItemsContainerStyle)
I have seen a few implementations on SO using Trigger, but that does not seem to be available in WP7, and I would prefer to not have to create a different style for each control so that they bind properly.
Any ideas?
See the following question: WP7 - Databind ListboxItem's IsEnabled Property
Which in turn links to this: Better SetterValueBindingHelper makes Silverlight Setters better-er!
I tried out SetterValueBindingHelper by David Anson for this specific scenario and it worked great. All you have to do is to add SetterValueBindingHelper.cs to your project and then you can bind IsEnabled in the setter like this
<Style x:Key="HeaderListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="delay:SetterValueBindingHelper.PropertyBinding">
<Setter.Value>
<delay:SetterValueBindingHelper Property="IsEnabled"
Binding="{Binding IsSuppressed}"/>
</Setter.Value>
</Setter>
</Style>
I need to change the DataTemplate of my ListBox, based on the ListBox items count. I have come up with the following XAML:
<Window.Resources>
<DataTemplate x:Key="DefaultTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Text}"/>
<TextBlock Text="default template" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="OtherTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Text}"/>
<TextBlock Text="other template" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<ListBox Name="listBox1" ItemsSource="{Binding Path=Items}">
<ListBox.Style>
<Style TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate" Value="{StaticResource DefaultTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Items.Count}" Value="1">
<Setter Property="ItemTemplate" Value="{StaticResource OtherTemplate}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
</ListBox>
With the above XAML, once I added two or more items to the bound list, the data template changed as expected (from other to default). However, if I remove the first item in the list with more than two items, the entire listbox just becomes empty (I verified that the bound list is non-empty). Removing the second item in a two items list works fine though (i.e. template changed from default to other).
Any ideas why this is happening? Or perhaps I went about the wrong way to solve this problem?
you could use data triggers, or you could use a DataTemplateSelector Here is an article that shows the basics. and here is the MSDN on applying it to the items control (also, a listbox)
I can't speak for the exact problem or the cause, but it is because a DataTrigger is setting a template when the count is 1 and only 1.
You can do 1 of 3 things to solve this problem, but only 1 I would recommend.
a) Implement your own DataTrigger by deriving from System.Windows.TriggerBase
b) Use an implementation of System.Windows.Data.IValueConverter that will convert from ItemsControl.Items.Count into a DataTemplate. Retrieve the templates by placing an element in scope of your resources as Binding.ConverterParameter, casting them to FrameWorkElement and call FrameWorkElement.FindResource().
C) This is my recommendation, write your own DataTemplateSelector to do the grunt work. This mechanism is specifically targeted at the functionality you with you achieve. I recently wrote one that will pick a DataTemplate based on the type of the source object without requiring a DataTemplate with no x:Key set. Using Properties on the template selector, you can pass DataTemplates into the DataTemplateSelector using XAML, removing that FindResource code 'todo' list.
I have a collection of ViewModels bound to a ListBox. I am trying to bind the IsSelected properties of each together. In WPF it works by setting the style:
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
</Style>
This does not work in Silverlight. How can I accomplish this?
In Silverlight, you are not able to create "global" styles, that is, styles that modify all controls of a certain type. Your style needs a key, and your control needs to reference it.
Also, TargetType simply needs the control type name. Silverlight does not support the x:Type extension.
ib.
Here's how i do it:
<ListBox.ItemTemplate>
<DataTemplate>
...
<CheckBox VerticalAlignment="Top" HorizontalAlignment="Left"
x:Name="CheckBox1" IsChecked="True" Grid.Row="0">
<inf:BindingHelper.Binding>
<inf:BindingProperties TargetProperty="Visibility" SourceProperty="IsSelected"
Converter="{StaticResource VisibilityConverter}"
RelativeSourceAncestorType="ListBoxItem" />
</inf:BindingHelper.Binding>
</CheckBox>
...
</DataTemplate>
</ListBox.ItemTemplate>
You need to do relative binding, which doesn't exist in Silverlight unfortunately...
BindingHelper is a helper class which overcomes this limitation (search for "relative binding in silverlight" to find it).