#919 – Changing the Border of a TextBox

October 2, 2013 6 Comments

You can change the border displayed around a TextBox using the BorderBrush and BorderThickness properties.

In the example below, we use a trigger to change the border of the TextBox that has focus.

    <Window.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <!-- Modify default template, to change triggers -->
                    <ControlTemplate TargetType="{x:Type TextBoxBase}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <!-- Original triggers -->
                            <!--<Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="True">
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                            </Trigger>-->
                            <!-- MY trigger -->
                            <Trigger Property="IsFocused" Value="True">
                                <Setter Property="BorderBrush" Value="Green"/>
                                <Setter Property="BorderThickness" Value="2"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label Content="Your hobo name:"/>
        <TextBox
            Grid.Column="1" Height="25"
            Margin="5"/>
        <Label Grid.Row="1" Content="Favorite cheese:" />
        <TextBox
            Grid.Row="1" Grid.Column="1" Height="25"
            Margin="5"/>
    </Grid>

919-001

Advertisement

Filed under Controls Tagged with , , ,

#894 – Creating a GroupBox with a Header But No Border

August 28, 2013 1 Comment

There are cases where you might want a GroupBox for grouping a set of child controls, but without the visual border around the controls.  You can retain the header element, but remove the border of a GrouBox by setting the BorderBrush property to Transparent.

    <GroupBox Margin="10" Header="Roman Guys" BorderBrush="Transparent">
        <StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image Source="Augustus.jpg" Height="100" Margin="5"/>
                <TextBlock Text="Augustus" VerticalAlignment="Center"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image Source="Tiberius.jpg" Height="100" Margin="5"/>
                <TextBlock Text="Tiberius" VerticalAlignment="Center"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image Source="Caligula.jpeg" Height="100" Margin="5"/>
                <TextBlock Text="Caligula" VerticalAlignment="Center"/>
            </StackPanel>
        </StackPanel>
    </GroupBox>

894-001

Filed under Controls Tagged with , , ,

#891 – Changing the Border of a GroupBox

August 23, 2013 2 Comments

You can easily change the border drawn around a GroupBox control by setting its BorderThickness and BorderBrush properties.

<GroupBox Header="Roman Dudes" Margin="10"
          BorderThickness="2" BorderBrush="Purple">
    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <Image Source="Augustus.jpg" Height="100" Margin="5"/>
            <TextBlock Text="Augustus" VerticalAlignment="Center"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <Image Source="Tiberius.jpg" Height="100" Margin="5"/>
            <TextBlock Text="Tiberius" VerticalAlignment="Center"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <Image Source="Caligula.jpeg" Height="100" Margin="5"/>
            <TextBlock Text="Caligula" VerticalAlignment="Center"/>
        </StackPanel>
    </GroupBox>

891-001

Filed under Controls Tagged with , , ,

#875 – Popup Control Doesn’t Require a Border

July 31, 2013 1 Comment

You’ll most often include a Border element as the single child of a Popup control, placing controls within the Border that should appear in the Popup.

You can, however, define a Popup that has a child element other than a Border.  The example below shows a simple Popup that contains only a TextBlock.

        <Popup Name="popCaesar" StaysOpen="False"
               AllowsTransparency="True">
            <TextBlock Text="Julius Caesar was a Roman emperor who lived from 100 BC to 44 BC"
                    Padding="5" Background="AntiqueWhite"
                    Width="150" TextWrapping="Wrap"/>
        </Popup>

875-001

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

#556 – Clipping to a Border Using an Opacity Mask

May 11, 2012 5 Comments

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

← Older posts