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

May 6, 2013 1 Comment

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

Filed under Controls Tagged with , , , ,

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

May 3, 2013 1 Comment

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

Filed under Controls Tagged with , , ,

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

May 2, 2013 1 Comment

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

Filed under Controls Tagged with , , , , ,

#810 – Setting Foreground and Background Properties from Code

May 1, 2013 1 Comment

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

Filed under Controls Tagged with , , ,

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

April 30, 2013 1 Comment

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

Filed under Controls Tagged with , , , ,

#726 – Sample Controls from the Extended WPF Toolkit

January 3, 2013 1 Comment

Here is just a small sampling of some of the controls available in the Extended WPF Toolkit, available from Xceed.

The CheckListBox control allows you to create a list box that contains a series of checked items.

726-001

 

The ColorPicker control allows the user to select a color, either from a list of standard colors or from a color palette.

726-002 726-003

The DateTimePicker control displays a dropdown allowing the user to select both a date and a time.

726-004

 

The DropDownButton control allows the user to click on a button that drops down to display any content that you like.

726-005

 

The IntegerUpDown control allows a user to select an integer by entering text or by clicking on up/down arrows to increase/decrease the value.

726-006

Filed under Controls Tagged with , ,

#725 – Make Use of the Extended WPF Toolkit

January 2, 2013 1 Comment

There is a WPF Toolkit project on Codeplex, authored by Microsoft, that includes a bunch of controls not available in the standard distribution.  But this project has been dormant since early 2010.

There is a more actively maintained WPF toolkit on Codeplex, the Extended WPF Toolkit (Community Edition).  This project was created by Xceed, as a community version of their more complete Extended WPF Toolkit Plus product.  The Plus version of the toolkit sells for a very reasonable $179.95.  But you can start by looking at the Community edition, which includes a big selection of controls.

Some of the controls in this project include:

  • IntegerUpDown
  • ColorSpectrumSlider
  • ColorCanvas
  • SingleUpDown
  • Pie
  • Selector
  • ZoomBox
  • CollectionEditorDialog
  • DateTimeUpDown
  • DateTimePicker
  • AutoSelectTextBox
  • DecimalUpDown
  • CheckListBox
  • and many more

Go take a look at the toolkit–it contains lots of great controls, as well as source code.

Filed under Controls Tagged with , ,

#716 – Using a Border As a Visual Indication That a Control Can Be Dragged

December 20, 2012 9 Comments

You can use the Thumb control to allow dragging a control around on a parent Canvas.  To make it a little more obvious to the user that the control can be dragged, you can set up a Border around the control that only shows up when the user moves the mouse over the control.

    <Window.Resources>
        <Style x:Key="BorderVisibleOnMouse" TargetType="Border">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Style.Triggers>
                <Trigger Property="Border.IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="LightBlue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Canvas>
        <Thumb Canvas.Left="100" Canvas.Top="60" DragDelta="Thumb_DragDelta">
            <Thumb.Template>
                <ControlTemplate>
                    <Border Style="{StaticResource ResourceKey=BorderVisibleOnMouse}">
                        <Label Content="Elvis Drafted!"/>
                    </Border>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
        <Thumb Canvas.Left="30" Canvas.Top="180" DragDelta="Thumb_DragDelta">
            <Thumb.Template>
                <ControlTemplate>
                    <Border Style="{StaticResource ResourceKey=BorderVisibleOnMouse}">
                        <Label Content="Richard the Lion-Hearted Captured!"/>
                    </Border>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
    </Canvas>

716-001
716-002
716-003

Filed under Controls Tagged with , , , ,

#715 – Using the Thumb Control to Drag Objects on a Canvas

December 19, 2012 Leave a comment

You can use the Thumb control for simple dragging of objects on a Canvas.  You set the Template of the Thumb control to contain the actual element to be dragged and then handle the thumb’s DragDelta event.

Below is a Canvas containing three controls, each wrapped in a Thumb and therefore draggable.

    <Canvas>
        <Thumb Canvas.Left="10" Canvas.Top="20" Canvas.ZIndex="99"  DragDelta="Thumb_DragDelta">
            <Thumb.Template>
                <ControlTemplate>
                    <Image Width="60" Height="60" Source="Crown.jpg"/>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
        <Thumb Canvas.Left="100" Canvas.Top="60" DragDelta="Thumb_DragDelta">
            <Thumb.Template>
                <ControlTemplate>
                    <Image Width="80" Height="100" Source="HenryII.jpg"/>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
        <Thumb Canvas.Left="30" Canvas.Top="180" DragDelta="Thumb_DragDelta">
            <Thumb.Template>
                <ControlTemplate>
                    <Label Content="Westminster, 19-Dec-1154"/>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
    </Canvas>

In the event handler for each of the Thumb controls, we simply adjust the thumb’s position on the Canvas.

        private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
        {
            UIElement thumb = e.Source as UIElement;

            Canvas.SetLeft(thumb, Canvas.GetLeft(thumb) + e.HorizontalChange);
            Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
        }

715-001
715-002

Filed under Controls Tagged with , , ,

#663 – How IsMouseOver Works for Nested Elements

October 8, 2012 1 Comment

The IsMouseOver property for a user interface element indicates whether the mouse is currently over the element.

When an element is contained within another element in the logical tree, then IsMouseOver will be true for both the lower-level element and for any elements higher up in the logical tree.

Suppose that we have a Button in a StackPanel which is inside a Window.

<Window Name="win1">
    <StackPanel Name="sp1" Background="Pink" Margin="20,0">
        <Button Name="btn1" Content="Click Me" HorizontalAlignment="Center" Padding="10,5"/>
    </StackPanel>
</Window>

If the mouse is in the application’s Window, but outside of the StackPanel, IsMouseOver will be true only for the Window.

If we move the mouse into the StackPanel, but not over the Button, IsMouseOver will be true for both the StackPanel and the Window.

Finally, moving the mouse over the Button results in IsMouseOver being true for all three elements.

Filed under Controls Tagged with , ,

← Older posts

Follow

Get every new post delivered to your Inbox.

Join 233 other followers