CODEWITHSUNDEEP
wpfwpf-controls
serhio
serhio

Reputation: 28586

Customize a TextBlock in WPF

I need to "decorate" a textBlock with a custom background (say, when IsSelected)

Actually I have two separate elements textBlock and its background rectangle:

    <TextBlock x:Name="StopText" Text="Eiffel Tower"
               Canvas.Left="17" 
               FontSize="14" 
               VerticalAlignment="Stretch" 
               HorizontalAlignment="Stretch"
               FontFamily="Giddyup Std" 
               Canvas.Top="-16"
               Padding="5">
    </TextBlock>
    <Rectangle x:Name="ShadowRectangle"
               Fill="SkyBlue" 
               Canvas.Left="18"
               Width="{Binding ElementName=StopText, Path=ActualWidth}"
               Height="{Binding ElementName=StopText, Path=ActualHeight}"
               RadiusX="5" RadiusY="5" Opacity="0.2" Canvas.Top="-17" 
               LayoutTransform="{Binding ElementName=StopText, Path=LayoutTransform}"/>

Now, when I want to Hide the textBlock I need to hide the rectangle too, etc. I think there is should be a more elegant way to do it.

Any remarks appreciated.

EDIT

Border approach

    <Border x:Name="ShadowRectangle"
            Background="Transparent" 
            Canvas.Left="18"
            Canvas.Top="-17" 
            CornerRadius="5"
            Opacity="0.2"   
            LayoutTransform="{Binding ElementName=StopText,
                                             Path=LayoutTransform}">            
        <TextBlock x:Name="StopText" Text="Eiffel Tower"
                   FontSize="14" VerticalAlignment="Stretch"
                   HorizontalAlignment="Stretch" FontFamily="Giddyup Std"
                   Canvas.Top="-16" Padding="5">
        </TextBlock>
    </Border>

Upvotes: 2

Views: 2946

Answers (5)

Ben
Ben

Reputation: 2484

Let me suggest to use templated label (textblock wont accept templates and took more characters to type -). For your convenience, I wrapped it in a style:

<Window x:Class="_4203457.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Style TargetType="{x:Type Label}">
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontFamily" Value="Giddyup Std"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Label}">
                    <Grid>
                        <TextBlock Text="{TemplateBinding Content}" 
                            FontSize="14" 
                            Padding="5"
                            VerticalAlignment="Stretch" 
                            HorizontalAlignment="Stretch"
                            FontFamily="Giddyup Std"
                                   />
                    <Rectangle x:Name="ShadowRectangle"
                        Fill="SkyBlue" 
                        RadiusX="5" RadiusY="5" Opacity="0.5" 
                           VerticalAlignment="Stretch" 
                           HorizontalAlignment="Stretch"
                        />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
    <Grid Height="27" Width="454">
    <Label Content="Eiffel Tower"/>
</Grid>

Upvotes: 0

Jason
Jason

Reputation: 1969

Using either the Border or Rectangle approach, you should be able to bind the Visibility of the decorator (Border or Rectangle) to the Visibility of the TextBlock.

        <TextBlock x:Name="StopText" Text="Eiffel Tower"
                   Canvas.Left="17" 
                   FontSize="14" 
                   VerticalAlignment="Stretch" 
                   HorizontalAlignment="Stretch"
                   FontFamily="Giddyup Std" 
                   Canvas.Top="-16"
                   Padding="5">
        </TextBlock>
        <Rectangle x:Name="ShadowRectangle"
                   Fill="Red" 
                   Canvas.Left="18"
                   Width="{Binding ElementName=StopText, Path=ActualWidth}"
                   Height="{Binding ElementName=StopText, Path=ActualHeight}"
                   RadiusX="5" RadiusY="5" Opacity="0.2" Canvas.Top="-17" 
                   LayoutTransform="{Binding ElementName=StopText, Path=LayoutTransform}"
                   Visibility="{Binding ElementName=StopText}"/>

Upvotes: 0

ihatemash
ihatemash

Reputation: 1494

Bind the visibility property for both the textblock and Rectangle to a bool in your viewmodel and use the BoolToVisibilityConverter to convert the bool value to a visibility value. Your XAML will look something like this:

        <TextBlock x:Name="StopText" Text="Eiffel Tower"
           Canvas.Left="17" 
           FontSize="14" 
           VerticalAlignment="Stretch" 
           HorizontalAlignment="Stretch"
           FontFamily="Giddyup Std" 
           Canvas.Top="-16"
           Padding="5"
           Visibility="{Binding IsVis, Converter={StaticResource BooleanToVisibilityConverter}}">
    </TextBlock>
    <Rectangle x:Name="ShadowRectangle"
           Fill="SkyBlue" 
           Canvas.Left="18"
           Width="{Binding ElementName=StopText, Path=ActualWidth}"
           Height="{Binding ElementName=StopText, Path=ActualHeight}"
           RadiusX="5" RadiusY="5" Opacity="0.2" Canvas.Top="-17" 
           Visibility="{Binding IsVis, Converter={StaticResource BooleanToVisibilityConverter}}"/>

Upvotes: 0

dcarneiro
dcarneiro

Reputation: 7150

In a solution similar to your border approach, if you want no dependencies between the opacity of the border and the textblock, you could go with something like this:

<grid>
    <rectangle />
    <textblock />
<grid>

this should put the textblock over the rectangle since they are on the same grid cell. They you only have to change the Rectangle.Fill when it's selected. You could do that using a DataTrigger on the Rectangle style.

Upvotes: 1

Kimtho6
Kimtho6

Reputation: 6184

You can make a Custom Control instead. Here is a link for some ideers: http://www.codeguru.com/cpp/i-n/internet/xml/article.php/c12521

Upvotes: 0

Related Questions