WPF, visibility and hiding controls using presentation models

In WPF, the data context for a control often sets the range of data available for binding. Using a presentation model, you can provide properties that are easy to bind to and provide some conditional display logic.

For example, if your presentation model has the following fields:

bool HasTitle { get; }
string Title { get; }
IList DataList { get; }

Then you can use these fields to bind. For example, create a new UserControl and in code (say in a spring container) set the DataContext to the presentation model. Then in the resource section of the control:

<CollectionViewSource x:Key="dataList" Source="{Binding Source=DataList}"/>

then use this as the source for your list views, etc. Gn the section where you define the controls that make up the user control you can toggle the visibility of different elements:

<Style x:Key="smallTitleStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="12" />
<Setter Property="Visibility" Value="{Binding Path=HasTitle, Converter={x:Static yournamespace:BooleanToVisibilityConverter:Instance}}" />
then apply this style to a title textbox:
<TextBlock Name="subtitle" Text="{Binding Path=Title}" Style="{StaticResource smallTitleStyle}" Margin="0,5,0,0" />
Note that you do not have to create the converter using a shared instance but I did so here since it will be used in many places in the UI.

Note that to convert a visibility argument into a boolean and back, you need to write a converter:
/// Convert a boolean to visibility value.

public class BooleanToVisibilityConverter : IValueConverter
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
bool tmp = (bool)value;
if (tmp)
return Visibility.Visible;
return Visibility.Collapsed;

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
Visibility v = (Visibility)value;
if (v == Visibility.Collapsed || v == Visibility.Hidden)
return false;
return true;

public static readonly BooleanToVisibilityConverter instance
= new BooleanToVisibilityConverter();

/// An instance that can be accessed as a static resource in XAML.

public static BooleanToVisibilityConverter Instance
get { return instance; }

and place that into the resources as well:
<yournamespace:BooleanToVisibilityConverter x:Key="visibilityConverter" />
...other resource as in above...
. Note that you only need to place it into the resources if you wish to access it as a StaticResource in the binding specification. In the above example, we accessed the shared instance directly by going to a static resource in the class.


Popular posts from this blog

zio layers and framework integration

typescript and react types

dotty+scala.js+async: interesting options