Click here to Skip to main content
15,896,606 members
Articles / Desktop Programming / WPF

WPF Control Composition (Part 2 of 2)

Rate me:
Please Sign up or sign in to vote.
4.86/5 (12 votes)
21 Mar 2012CPOL6 min read 44.8K   1.6K   36  
Theming an existing user control adds flexibilty at the application side without changing the original implementation. This article gives an example by theming a user control that was previously not fully themeable.
<Window x:Class="TestSimpleControls.View.TestWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        
        xmlns:simple="clr-namespace:SimpleControls.ComboBox;assembly=SimpleControls"
        xmlns:hyperlink="clr-namespace:SimpleControls.Hyperlink;assembly=SimpleControls"
        xmlns:textbox="clr-namespace:SimpleControls.WatermarkTextBox;assembly=SimpleControls"

        xmlns:local="clr-namespace:TestSimpleControls"
        xmlns:cmd="clr-namespace:TestSimpleControls.View"
        Title="Test Window"

        Width="525"
        SizeToContent="Height"
        Style="{DynamicResource WindowDefaultStyle}"
        >
  <Window.Resources>
    <ObjectDataProvider x:Key="LookupValues" ObjectType="{x:Type local:Collections}" MethodName="GetFormOfAddress"/>
  </Window.Resources>
  <Window.CommandBindings>
    <CommandBinding Command="cmd:MainCommands.ViewTheme" Executed="ChangeThemeCommand_Executed"/>
    <CommandBinding Command="cmd:MainCommands.Exit" Executed="Close_CommandExecuted"/>
  </Window.CommandBindings>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="2*"/>
      <ColumnDefinition Width="4*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Menu IsMainMenu="True" Grid.Row="0" Grid.ColumnSpan="2">
      <MenuItem Header="_File">
        <MenuItem Command="cmd:MainCommands.Exit"/>
      </MenuItem>
      <MenuItem Header="_View">
        <MenuItem Header="Expression Dark Skin"
                    Command="cmd:MainCommands.ViewTheme" CommandParameter="ExpressionDark"/>

        <MenuItem Header="Generic (No Skin)"
                    Command="cmd:MainCommands.ViewTheme" CommandParameter="Generic"/>

        <MenuItem Header="Whistler Blue Skin"
                    Command="cmd:MainCommands.ViewTheme" CommandParameter="WhistlerBlue"/>

      </MenuItem>
    </Menu>


    <StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Right">
      <TextBlock Text="Source:" VerticalAlignment="Center"/>
      <hyperlink:WebHyperlink Text="WPF Control Composition (Part 2 of 2)"
                                NavigateUri="http://www.codeproject.com/Articles/332541/WPFControlCompositionPart2of2"
                                Grid.Column="1" Grid.Row="1" Margin="6, 3" VerticalAlignment="Center"/>
    </StackPanel>

    <GroupBox  Header="Simple ComboBox Control with Label"
               Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Margin="3">
      <simple:ComboBoxWithLabel LabelContent="Title:"
                              ItemsSource="{Binding Source={StaticResource LookupValues}}"
                              DisplayMemberPath="Value"
                              SelectedValuePath="Key"
                              SelectedIndex="0"
                              HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="3" />
    </GroupBox>

    <GroupBox Header="ComboBox and Text Control"
              Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" Margin="3">
      <simple:ComboBoxWithLabeledTextInput
              LabelContent="Title:"
              ItemsSource="{Binding Source={StaticResource LookupValues}}"
              DisplayMemberPath="Value"
              SelectedValuePath="Key"
                                         
              LabelTextBox="Name:"
              Text="&lt;Input Name&gt;"
              SelectedIndex="0"
              HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="3" />
    </GroupBox>

    <GroupBox Header="Watermark Textbox"
              Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2" Margin="3,18,3,3">
      <Grid>
        <textbox:TextBoxWithWatermark
          Text="" Watermark="First and second given name" LabelTextBox="Name:" />
      </Grid>
    </GroupBox>

    <GroupBox Header="Combobox with Watermark Textbox"
              Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2" Margin="3,18,3,3">
      <Grid>
        <simple:ComboBoxWaterMarkTextInput
              LabelContent="Title:"
              ItemsSource="{Binding Source={StaticResource LookupValues}}"
              DisplayMemberPath="Value"
              SelectedValuePath="Key"
              SelectedIndex="0"

              LabelTextBox="Name:" Text="" Watermark="First and second given name" />
      </Grid>
    </GroupBox>

    <Expander Header="References" Grid.Column="0" Grid.Row="6" Grid.ColumnSpan="2" Margin="3,18,3,3">
      <Grid Margin="6">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Ellipse Fill="White" Height="10" Width="10" StrokeThickness="1" Stroke="Black"
                 Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="3" />
        <TextBlock Grid.Column="1" Grid.Row="0" Margin="3" VerticalAlignment="Center">Code Project, StackOverflow, and DotNet Spark:</TextBlock>
        <hyperlink:WebHyperlink Text="Exposing inner Control properties for binding in WPF"
                                NavigateUri="http://stackoverflow.com/questions/4169090/exposing-inner-control-properties-for-binding-in-wpf"
                                Grid.Column="1" Grid.Row="1" Margin="6, 3" VerticalAlignment="Center"/>

        <hyperlink:WebHyperlink Text="WPF, UserControl, and Commands? Oh my!"
                                NavigateUri="http://stackoverflow.com/questions/616206/wpf-usercontrol-and-commands-oh-my"
                                Grid.Column="1" Grid.Row="2" Margin="6, 3" VerticalAlignment="Center"/>

        <hyperlink:WebHyperlink Text="Create Watermark TextBox in WPF Application"
                                NavigateUri="http://www.dotnetspark.com/kb/1716-create-watermark-textbox-wpf-application.aspx"
                                Grid.Column="1" Grid.Row="3" Margin="6, 3" VerticalAlignment="Center"/>

        <Ellipse Fill="White" Height="10" Width="10" StrokeThickness="1" Stroke="Black"
                 Grid.Column="0" Grid.Row="4" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="3,18,3,3" />
        <TextBlock Grid.Column="1" Grid.Row="4" Margin="3,18,3,3">MSDN References:</TextBlock>
        <hyperlink:WebHyperlink Text="Combobox Class"
                              NavigateUri="http://msdn.microsoft.com/en-us/library/system.windows.controls.combobox.aspx"
                              Grid.Column="1" Grid.Row="5" Margin="6, 3" VerticalAlignment="Center"/>

        <hyperlink:WebHyperlink Text="Hyperlink Class"
                                NavigateUri="http://msdn.microsoft.com/en-us/library/system.windows.documents.hyperlink.aspx"
                                Grid.Column="1" Grid.Row="6" Margin="6, 3" VerticalAlignment="Center"/>

        <hyperlink:WebHyperlink Text="TextBlock Class"
                                NavigateUri="http://msdn.microsoft.com/en-us/library/system.windows.controls.textblock.aspx"
                                Grid.Column="1" Grid.Row="7" Margin="6, 3" VerticalAlignment="Center"/>
      </Grid>
        </Expander>
  </Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Germany Germany
The Windows Presentation Foundation (WPF) and C# are among my favorites and so I developed Edi

and a few other projects on GitHub. I am normally an algorithms and structure type but WPF has such interesting UI sides that I cannot help myself but get into it.

https://de.linkedin.com/in/dirkbahle

Comments and Discussions