Настройте TextBlock в WPF

Question

Мне нужно «украсить» текстовый блок пользовательским фоном (скажем, когда IsSelected)

На самом деле у меня есть два отдельных элемента 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="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}"/>

Теперь, когда я хочу скрыть текстовый блок, мне тоже нужно скрыть прямоугольник и т. Д. Я думаю, что должен быть более элегантный способ сделать это.

Любые замечания приветствуются.

EDIT

Пограничный подход

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

Answer 1

В решении, аналогичном подходу с использованием границ, если вы не хотите, чтобы между прозрачностью границы и текстовым блоком не было зависимостей, вы можете использовать что-то вроде этого:

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

это должно поместить текстовый блок поверх прямоугольника, так как они находятся в одной ячейке сетки. Они вам нужно только изменить Rectangle.Fill, когда он выбран. Вы можете сделать это, используя DataTrigger в стиле Rectangle.

Answer 2

Позвольте мне предложить использовать шаблонную метку (текстовый блок не принимает шаблоны и требует больше символов для ввода -).Для вашего удобства я обернул его в стиле:

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

Answer 3

Используя подход «Граница» или «Прямоугольник», вы должны иметь возможность связать видимость декоратора (границу или прямоугольник) с видимостью текстового блока.

        <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}"/>

Answer 4

Свяжите свойство видимости для текстового блока и Rectangle с логическим значением в вашей модели представления и используйте BoolToVisibilityConverter, чтобы преобразовать значение bool в значение видимости.Ваш XAML будет выглядеть примерно так:

        <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}}"/>

Answer 5

Вместо этого вы можете создать пользовательский элемент управления. Вот ссылка для некоторых идееров: http://www.codeguru.com/cpp/i-n/internet/xml/article.php/c12521