#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 , , , ,

#556 – Clipping to a Border Using an Opacity Mask

May 11, 2012 1 Comment

When you specify a border radius for a Border element, the content within the Border is not automatically clipped to the new rounded interior.

<Border BorderBrush="Black" BorderThickness="3" Margin="10"
        Width="400" Height="267" CornerRadius="40" >
    <Image Source="Images\Rocks2Small.jpg"/>
</Border>


If you want to clip against the Border, you can specify an opacity mask that is a visual brush bound to the visual of a second Border element that overlays the Image control.  This will cause any portion of the Image control that falls outside the boundaries of the inner Border to use an opacity of 0.0.

<Border BorderBrush="Black" BorderThickness="3" Margin="10" Width="400" Height="267"
	CornerRadius="40" >
    <Grid>
        <Border	Name="myBorder" CornerRadius="40" Background="White" Margin="1"/>
	<Image Source="Images\Rocks2Small.jpg" Margin="1">
	    <Image.OpacityMask>
	        <VisualBrush Visual="{Binding ElementName=myBorder}"/>
	    </Image.OpacityMask>
	</Image>
    </Grid>
</Border>


Thanks to fellow Minnesotan, Chris Cavanagh, for an explanation of how to do this!

Filed under Brushes Tagged with , , , ,

#462 – Drawing a Better Looking GridSplitter

December 30, 2011 2 Comments

By default, a GridSplitter control is composed only of a Border element.  You can set the border’s thickness, color and background.

We can make the GridSplitter look a little nicer by drawing a couple horizontal lines on its surface.

We do this by overriding the default Style for the GridSplitter.

	<Window.Resources>
		<Style x:Key="GridSplitterPreviewStyle" >
			<Setter Property="Control.Template">
				<Setter.Value>
					<ControlTemplate>
						<Rectangle Fill="#80000000"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="GridSplitterStyle1" TargetType="{x:Type GridSplitter}">
			<Setter Property="Background"
                    Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
			<Setter Property="PreviewStyle" Value="{StaticResource GridSplitterPreviewStyle}"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type GridSplitter}">
						<Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                CornerRadius="5">
                            <Canvas RenderOptions.EdgeMode="Aliased" UseLayoutRounding="True"
                                    Height="6" VerticalAlignment="Center"
                                    Width="50" HorizontalAlignment="Center">
                                <Line X1="0" X2="50" Y1="0" Y2="0"
                                      Stroke="White" StrokeThickness="1"/>
                                <Line X1="0" X2="50" Y1="1" Y2="1"
                                      Stroke="#A0A0A0" StrokeThickness="1"/>
                                <Line X1="0" X2="50" Y1="4" Y2="4"
                                      Stroke="White" StrokeThickness="1"/>
                                <Line X1="0" X2="50" Y1="5" Y2="5"
                                      Stroke="#A0A0A0" StrokeThickness="1"/>
                            </Canvas>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Window.Resources>

We also specify a gradient fill for the Background of the GridSplitter.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Label Content="Row 0 Col 0" Background="Azure" Grid.Row="0" Grid.Column="0" />
        <Label Content="Row 0 Col 1" Background="Lavender" Grid.Row="0" Grid.Column="1" />
        <Label Content="Row 2 Col 0" Background="Moccasin" Grid.Row="2" Grid.Column="0" />
        <Label Content="Row 2 Col 1" Background="Honeydew" Grid.Row="2" Grid.Column="1" />

        <GridSplitter Grid.Row ="1" Grid.ColumnSpan="2" Height="16"
                      VerticalAlignment="Center" HorizontalAlignment="Stretch"
                      BorderBrush="White" BorderThickness="1"
					  Style="{DynamicResource GridSplitterStyle1}">
            <GridSplitter.Background>
                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                    <GradientStop Color="#A0A0A0" Offset="0"/>
                    <GradientStop Color="#E5E5E5" Offset="0.15"/>
                    <GradientStop Color="#ECECEC" Offset="0.8"/>
                    <GradientStop Color="#E5E5E5" Offset="1"/>
                </LinearGradientBrush>
            </GridSplitter.Background>
        </GridSplitter>
    </Grid>

Filed under Layout Tagged with , , , ,

#439 – Using a DropShadow with a Border, part II

November 29, 2011 1 Comment

I described earlier how you can use two sibling Border elements to end up with the effect of a Border with a DropShadow.  We did this because specifying a DropShadowEffect for a Border will lead to all of the child elements contained in the Border getting the same drop shadow.

A cleaner way to avoid the drop shadows on the child elements is to just specify a value for the Background property of the original parent Border, so that it becomes opaque.

            <Border Margin="10" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="4"
                    Background="{x:Static SystemColors.ControlLightLightBrush}">
            	<Border.Effect>
            		<DropShadowEffect/>
            	</Border.Effect>
                <StackPanel Orientation="Vertical" Margin="5" Visibility="Visible">
                    <Label Content="Rounded corners are everywhere"/>
                    <Button Content="Push Me" Padding="30,5" Margin="5" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>


You can get some nice effects by using the combination of a gradient fill for the background along with a drop shadow.

Filed under Controls Tagged with , , , , ,

#438 – Border Element Can Have a Background

November 28, 2011 Leave a comment

You can use the Background property to specify a background color (or brush) for everything within a Border.

            <Border Margin="10" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="4">
            	<Border.Background>
            		<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
            			<GradientStop Color="#FF93C0D4" Offset="0"/>
            			<GradientStop Color="#FFCACACA" Offset="1"/>
            		</LinearGradientBrush>
            	</Border.Background>
                <StackPanel Orientation="Vertical" Margin="5" Visibility="Visible">
                    <Label Content="Rounded corners are all around us"/>
                    <Button Content="Push Me" Padding="30,5" Margin="5" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>

Filed under Controls Tagged with , , ,

#437 – Showing Rounded Corners on a Border

November 25, 2011 Leave a comment

You can set a Border element to show rounded corners by using the CornerRadius property.  If specified, this property indicates the radius, in device independent units, of one or more of the corners of a Border.

        <Grid>
            <Border Margin="10" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="5">
                <StackPanel Orientation="Vertical" Margin="5" Visibility="Visible">
                    <Label Content="Rounded corners are all around us"/>
                    <Button Content="Push Me" Padding="30,5" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>
        </Grid>


You can also specify different radii for each corner.

            <Border Margin="10" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="4,8,32,16">

Filed under Controls Tagged with , , , ,

#436 – Using a Drop Shadow with a Border

November 23, 2011 1 Comment

If you specify a DropShadowEffect for a Border, all elements within the border will get a drop shadow.

        <Border Margin="10" BorderBrush="Black" BorderThickness="1">
            <Border.Effect>
                <DropShadowEffect/>
            </Border.Effect>
            <StackPanel Orientation="Vertical" Margin="5">
                <Label Content="Staying within borders"/>
                <Button Content="Do It"/>
            </StackPanel>
        </Border>


If you want the drop shadow around only the Border, you can create two sibling borders–one that has the drop shadow but no content and one that has the content and no drop shadow.

        <Grid>
            <Border Margin="10" BorderBrush="Black" BorderThickness="1" Background="White">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="2"/>
                </Border.Effect>
            </Border>

            <Border Margin="10" BorderBrush="Black" BorderThickness="1">
                <StackPanel Orientation="Vertical" Margin="5">
                    <Label Content="Staying within borders"/>
                    <Button Content="Do It"/>
                </StackPanel>
            </Border>
        </Grid>

Filed under Controls Tagged with , , , ,

#435 – Use Border Element to Draw Border Around Elements

November 22, 2011 Leave a comment

You can easily draw a border around any control by nesting the element within a Border element in XAML.  The content property for the Border element is the Child property, which specifies the single child (an UIElement) contained with the border.  In XAML, you surround a control with a border by making it the child element of a Border element.

	<StackPanel>
		<Label Margin="10" Content="I'm free.."/>

        <Border Margin="10" BorderBrush="Black" BorderThickness="1">
            <Label Content="Don't Fence Me In"/>
        </Border>

        <Border Margin="10" BorderBrush="Black" BorderThickness="1">
            <StackPanel Orientation="Vertical" Margin="5">
                <Label Content="Staying within borders"/>
                <Button Content="Do It"/>
            </StackPanel>
        </Border>
	</StackPanel>

The BorderBrush and BorderThickness properties must both be specified.  The BorderBrush can be set to any brush, including solid or gradient brushes.  The BorderThickness property specifies the thickness of the border in device independent units.

Filed under Controls Tagged with , ,

#279 – Adding a Border Around an Image Control

April 17, 2011 Leave a comment

To add a border around an Image control, you can embed the Image in a Border element.

	<Border BorderBrush="SaddleBrown" BorderThickness="3">
		<Image Name="imgKlondike" Source="TractorSm.png" />
	</Border>

If this Border element is the single child element in a Window, this will look like:

Notice that the Border fills the available space in the Window, but the Image ends up with white bands on either size.  Because the image’s Stretch property is set to Uniform, it’s preserving the aspect ratio of the image and so doesn’t fill all of the available space.

If you want the Border to surround the image without including the white bands, you can add alignment attributes to the Border element.

	<Border BorderBrush="SaddleBrown" BorderThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center">
		<Image Name="imgKlondike" Source="TractorSm.png" />
	</Border>

Filed under Controls Tagged with , , ,

#272 – Displaying a Border Around a Window

April 10, 2011 Leave a comment

You can include a border around the edges of a Window using the BorderBrush and BorderThickness properties.

By default, the BorderBrush is null and BorderThickness is a Thickness structure with all of its dimensions set to 0.

If you specify only the BorderThickness property, you get a black border around the window.

<Window
	 BorderThickness="5,10,5,10">

You can also specify both a border brush and a border thickness.

<Window
	 BorderThickness="20">

	<Window.BorderBrush>
	 	<LinearGradientBrush>
            <GradientStop Color="DarkKhaki" Offset="0.0"/>
            <GradientStop Color="DarkGreen" Offset="1.0"/>
        </LinearGradientBrush>
	</Window.BorderBrush>

Filed under Controls Tagged with , , , ,

Follow

Get every new post delivered to your Inbox.

Join 240 other followers