#836 – Setting a ContentControl’s Content to a CLR Object

You’ll typically set the Content property of a content control to an instance of an UIElement, which will typically include one or more controls.  (E.g. On a Button).

You can also set a Content property to a plain CLR object, i.e. an object that derives from System.Object.  When you do this, a content control will render the object by calling its ToString method.

In the example below, a Tooltip’s content is set to an instance of a Dog class.  When the tooltip is displayed, the dog’s ToString method is called.

<Window.Resources>
    <local:Dog x:Key="myDog" Name="Kirby" Age="15" FavToy="Tennis ball"/>
</Window.Resources>

<StackPanel DataContext="{StaticResource myDog}">
    <Label Content="{Binding Name}" Margin="10"
           ToolTip="{Binding}"/>
</StackPanel>

Assume that the ToString method dumps out the contents of the object:

        public override string ToString()
        {
            StringBuilder sbValue = new StringBuilder(string.Format("Dog {0}:\n", Name));
            sbValue.AppendFormat("  Age: {0}\n", Age);
            sbValue.AppendFormat("  Favorite Toy: {0}\n", FavToy);

            return sbValue.ToString();
        }

836-001

#835 – Displaying Custom Content in a GroupBox Header

You normally set the Header property of a GroupBox to some text.

        <GroupBox Header="Julius Caesar">
            <Label Content="100BC - 44BC, etc."/>
        </GroupBox>
        <GroupBox Header="Augustus">
            <Label Content="63BC - 14AD, etc."/>
        </GroupBox>

835-001

You can, however, set the Header to anything that you like, including a panel containing other controls.

        <GroupBox>
            <GroupBox.Header>
                <StackPanel Orientation="Horizontal">
                    <Label Content="Julius Caesar"/>
                    <Image Source="Caesar.jpg" Height="48"/>
                </StackPanel>
            </GroupBox.Header>
            <Label Content="100BC - 44BC, etc."/>
        </GroupBox>
        <GroupBox>
            <GroupBox.Header>
                <StackPanel Orientation="Horizontal">
                    <Label Content="Augustus"/>
                    <Image Source="Augustus.jpg" Height="48"/>
                </StackPanel>
            </GroupBox.Header>
            <Label Content="63BC - 14AD, etc."/>
        </GroupBox>

835-002

#834 – Displaying Custom Content on a TabControl’s Tabs

When you use a TabControl in your application, each tab is represented by a TabItem.  The content of the TabItem is a single container and items placed within this container show up in the body of the TabControl when that tab is clicked.

When you set the Header property of a TabItem to some text, that text will be drawn on the tab.

    <TabControl Margin="5" >
        <TabItem Header="His">
            <StackPanel>
                <Label Content="His stuff goes here"/>
            </StackPanel>
        </TabItem>

        <TabItem Header="Hers">
            <StackPanel>
                <Label Content="Her stuff goes here"/>
            </StackPanel>
        </TabItem>
    </TabControl>

834-001
Because TabItem.Header is of type object, you can set the Header to anything that you like.  (E.g. a panel containing multiple items).

    <TabControl Margin="5" >
        <TabItem>
            <TabItem.Header>
                <Image Source="His.png" Height="50"/>
            </TabItem.Header>
            <StackPanel>
                <Label Content="His stuff goes here"/>
            </StackPanel>
        </TabItem>

        <TabItem>
            <TabItem.Header>
                <Image Source="Hers.png" Height="50"/>
            </TabItem.Header>
            <StackPanel>
                <Label Content="Her stuff goes here"/>
            </StackPanel>
        </TabItem>
    </TabControl>

834-002

#833 – CheckBox is a ContentControl

CheckBox control derives from ContentControl, which means that it can contain a single piece of content.  In the case of a CheckBox, this content is rendered next to the actual check box that a user can check on or off.

You typically set the content of a CheckBox to a string, which gets rendered next to the check box.

        <CheckBox Content="Learn to juggle"/>
        <CheckBox Content="Read War and Peace"/>
        <CheckBox Content="Visit Japan"/>

833-001
You can, however, set the Content property to anything that you like, including a panel that contains other controls.

        <CheckBox VerticalContentAlignment="Center">
            <CheckBox.Content>
                <StackPanel>
                    <Image Source="Juggler.png" Height="85"/>
                    <Label Content="Learn to juggle"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>
        <CheckBox VerticalContentAlignment="Center">
            <CheckBox.Content>
                <StackPanel>
                    <Image Source="leo.jpg" Height="85"/>
                    <Label Content="Read War and Peace"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>
        <CheckBox VerticalContentAlignment="Center">
            <CheckBox.Content>
                <StackPanel>
                    <Image Source="kinkakuji.jpg" Height="85"/>
                    <Label Content="Visit Japan"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>

833-002

#828 – ListView and GridView Data Binding Example

ListView control contains a collection of items that you can view in different ways.  The current view can be set using the View property, which can be set to an instance of a GridView.  A GridView is an object that can display the data in columns.

Below is a complete example of a bound ListView that uses a GridView to display its items.  The ListView is bound to a collection and the GridView contains GridViewColumn instances, each of which is bound to a property of the items contained in the collection.

    <StackPanel>
        <Label Content="Ad eundum quo nemo ante iit"
               Margin="5"
               Background="LightCoral"/>
        <ListView ItemsSource="{Binding Guys}">
            <ListView.View>
                <GridView>
                    <GridViewColumn DisplayMemberBinding="{Binding Name}"
                                    Header="Guy"/>
                    <GridViewColumn DisplayMemberBinding="{Binding Age}"
                                    Header="Age"/>
                </GridView>
            </ListView.View>
        </ListView>
    </StackPanel>

The code-behind for the top-level Window sets the data context and creates the collection.

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public ObservableCollection<Person> Guys { get; protected set; }

        public MainWindow()
        {
            this.InitializeComponent();
            this.DataContext = this;

            Guys = new ObservableCollection<Person>();
            Guys.Add(new Person("Julius Caesar", 40));
            Guys.Add(new Person("Pompeius Magnus", 46));
            Guys.Add(new Person("Marcus Crassus", 55));
            RaisePropertyChanged("Guys");
        }

        public event PropertyChangedEventHandler PropertyChanged = delegate { };

        private void RaisePropertyChanged(string propName)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }

For completeness, here is the implementation of the Person class.

    public class Person :  INotifyPropertyChanged
    {
        public string Name { get; set; }
        public int Age { get; set; }

        public Person(string name, int age)
        {
            Name = name;
            Age = age;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propName)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }

828-001

#813 – Applying TextDecorations in the Middle of a Block of Text

You can apply one of several different text decorations to a block of text by using the TextDecorations property for a TextBlock control.  But setting this property means that the decoration chosen applies to all text contained within the TextBlock.

Alternatively, you can apply one of the four text decorations (Underline, Baseline, StrikeThrough or Overline) to a subset of the text by using a Run element.  (Note: In the example below, we use an Underline tag directly, rather than setting the TextDecorations property on a Run element).

        <TextBlock Padding="20,10" FontSize="16"
                   TextWrapping="Wrap">
            We <Underline>few</Underline>,
            we <Run TextDecorations="Baseline">happy</Run> few,
            we band of <Run TextDecorations="StrikeThrough">guys</Run> brothers;
            For he to-day that sheds his <Run TextDecorations="Overline">blood</Run> with me
            Shall be my brother; be he ne'er so vile,
            This day shall gentle his condition;"
        </TextBlock>

813-001

#812 – Use TextDecorations Property to Underline or Strike Through Text

Some controls that render text include a TextDecorations property that allows you to underline the text or draw a line through the middle of the text.

The allowed values of the TextDecorations property are:

  • Underline – Underline the text (line appears just a bit below the bottom of the characters)
  • Baseline – Draw a line that runs along the bottom edge of the characters (just above where the underline would appear)
  • StrikeThrough – Draw a line through the middle of the characters
  • Overline – Draw a line over the top edge of the characters

Below is an example of the TextDecorations property used with the TextBlock control.  TextDecorations is not supported for Labels.

        <TextBlock Text="Underline pphh" Padding="20,10" FontSize="16"
                   TextDecorations="Underline"/>
        <TextBlock Text="Baseline pphh" Padding="20,10" FontSize="16"
                   TextDecorations="Baseline"/>
        <TextBlock Text="StrikeThrough pphh" Padding="20,10" FontSize="16"
                   TextDecorations="StrikeThrough"/>
        <TextBlock Text="Overline pphh" Padding="20,10" FontSize="16"
                   TextDecorations="Overline"/>

812-001

#811 – Setting Color Values in Code Based on System Colors

You can set the Foreground or Background properties of a control to a brush that will render the control using one of the predefined system colors.  The SystemColors class contains a number of static SolidColorBrush objects representing brushes that match the system colors.

811-001

        <Label Name="lblMA" Content="Margaret Atwood" HorizontalAlignment="Center"
               Padding="20,10" Margin="10"
               Background="LightPink"/>
        <Button Content="Change Color" HorizontalAlignment="Center"
                Padding="10,5" Click="Button_Click"/>

 

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Set to one of the predefined brushes that map
            // to the system colors
            lblMA.Background = SystemColors.ActiveCaptionBrush;
        }

811-002
811-003

#810 – Setting Foreground and Background Properties from Code

You can set both the Foreground and Background properties at run-time, from code.  Recall that both properties are set to an instance of a Brush, which can be a SolidColorBrush,  one of the GradientBrush subtypes, or one of several other different types of Brush objects.

The simplest way to change a Foreground or Background property, assuming that you want to set them to a solid color, is to set the property to refer to one of the preexisting SolidColorBrush objects that are part of the Brushes class.

The Brushes class includes a set of static SolidColorBrush objects, each representing one of the standard predefined colors.

        <Label Name="lblMA" Content="Margaret Atwood" HorizontalAlignment="Center"
               Padding="20,10" Margin="10"
               Background="LightPink"/>
        <Button Content="Change Color" HorizontalAlignment="Center"
                Padding="10,5" Click="Button_Click"/>

810-001

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Set to one of the predefined brushes
            lblMA.Background = Brushes.Plum;
        }

810-002

#809 – You Can Use a Brush for a Control’s Background

A control’s Background property dictates how the background of the control is rendered.  It is set to an instance of a Brush object.  The two most common types of brushes are solid color brushes (SolidColorBrush) and brushes painted with a color gradient (GradientBrush).

You can use the shortcut of specifying one of the predefined colors for the value of the Background property.  This will cause the background to be rendered with a predefined SolidColorBrush of the specified color.

    <StackPanel>
        <Label Content="Hemingway" HorizontalAlignment="Center"
               Background="LightBlue"/>
        <Label Content="Fitzgerald" HorizontalAlignment="Center"
               Background="Thistle"/>
    </StackPanel>

809-001
You can also explicitly define a brush. The example below uses a LinearGradientBrush that ranges between two colors.

        <Label Content="Hemingway and Fitgerald" HorizontalAlignment="Center"
               Padding="20,10" Margin="10">
            <Label.Background>
                <LinearGradientBrush>
                    <GradientStop Color="LightBlue" Offset="0.0"/>
                    <GradientStop Color="Thistle" Offset="1.0"/>
                </LinearGradientBrush>
            </Label.Background>
        </Label>

809-002

Follow

Get every new post delivered to your Inbox.

Join 241 other followers