Lookless control in Warewolf – Part 1

Creating a Lookless control can be beneficial to your application and saves time on having to create multiple controls over and over again. In this series we will look at what a Lookless control is and how we can use it in our application. Part 1 will start with basic structure and will show the default template of what we will use as we progress. There are many ways of creating a Lookless control, so it’s your preference which format you want to commit to, finding simpler ways to make it work better.

Lookless control

WPF separates functionality of a control from the way it looks, but we still need to ensure that our custom controls behave as intended and also have the default look in place. A Lookless control is pretty much self-explained; we want as little as possible in our UI XAML which makes for a cleaner UI. For this example we’ll create a custom control using a label and textbox.

Implementing Lookless control

Firstly, create a new “EditableCustomControl” class that inherits from the Control base class. Then add the Dependency properties for the Label and TextBlock.  There are many examples online which explain how Dependency Properties work in detail and how to implement them.

 

public class EditableCustomControl : Control
{
 #region Label Dependency Property
 public string Label
 {
  get { return (string)GetValue(LabelProperty); }
  set { SetValue(LabelProperty, value); }
 }
 public static readonly DependencyProperty LabelProperty =    DependencyProperty.Register
 (
  "Label",
  typeof(string),
  typeof(EditableCustomControl),
  new PropertyMetadata(null)
 );
 #endregion Label Dependency Property
 
 #region EditableText Dependency Property
 public string EditableText
 {
  get { return (string)GetValue(EditableTextProperty); }
  set { SetValue(EditableTextProperty, value); }
  }
 public static readonly DependencyProperty EditableTextProperty = DependencyProperty.Register
 (
  "EditableText",
  typeof(string),
  typeof(EditableTextAndLabelControl),
  new PropertyMetadata(null)
 );
 #endregion EditableText Dependency Property
}

 

Style and Control Template

Next, we’ll look at creating the Control Template that will display the custom control. When creating the control template, it’s best to keep the template in a resource and not in a window or user control resource. All styles/templates should be separated from the views in a separate folder/project in order to reuse them in other views. The control template holds a simple TextBlock and TextBox control. The TextBlock binds to the Label of the EditableCustomControl class, and the TextBox binds to the EditableText of the EditableCustomControl class.

<ControlTemplate x:Key="EditableTextTemplate" TargetType="customControls:EditableCustomControl">
 <Grid>
  <!-- Label dependency property of the control -->
  <TextBlock x:Name="TextBlock"
    Text="{Binding Path=Label, RelativeSource={RelativeSource  TemplatedParent}}" />
  <!-- EditableText dependency property of the control -->
  <TextBox x:Name="TextBox"
    Text="{Binding Path=EditableText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
 </Grid>
</ControlTemplate>
 
<Style x:Key="EditableCustomControlStyle" TargetType="customControls:EditableCustomControl ">
 <Setter Property="HorizontalAlignment" Value="Stretch"/>
 <Setter Property="VerticalAlignment" Value="Top"/>
 <Setter Property="Template" Value="{StaticResource EditableTextTemplate}"/>
</Style>

Window and Result

Once you have your custom control created and styled, you can create a new window or user control and call the custom control.

<Grid>
 <Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
 
 <customControls:EditableCustomControl Label="Name:" Grid.Row="0"
    Style="{StaticResource TheEditableTextAndLabelControlStyle}"/>
 
 <customControls:EditableCustomControl Label="Last Name:" Grid.Row="1"
    Style="{StaticResource TheEditableTextAndLabelControlStyle}"/>
 
 <customControls:EditableCustomControl Label="Email:" Grid.Row="2"
    Style="{StaticResource TheEditableTextAndLabelControlStyle}"/>
 </Grid>
</Window>

Looking at the XAML, the same custom control is used that inherits the style format which will handle the template. The end result shows the custom control displaying the TextBlock and TextBox from the template.

image of lookless control xaml

Conclusion

Now you see how simple it is to create a custom Lookless control and the benefits it holds in reusing it throughout your application. In Part 2 we will start building a more complex Lookless control that will have even less in the UI. We will also start looking at alignment and how to better manage a fully customizable view. We will be using this approach to help us create UIs more efficiently, but also implementing a structure that we can use in creating tools. Follow the progress on GitHub as we start to create and use these controls in Warewolf.

FacebookTwitterLinkedInGoogle+RedditEmail

Leave A Comment?