Question

我需要用自定义背景“装饰”一个textBlock（例如，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}"/>

现在，当我想隐藏textBlock时，我也需要隐藏矩形等等。我认为应该有更优雅的方式来实现它。

任何评论都表示赞赏。

修改

边境方法

    <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。您可以使用Rectangle样式上的DataTrigger来执行此操作。

Answer 2

您可以改为制作自定义控件。这是一些思想的链接： http://www.codeguru.com/cpp/i-n/internet/xml/article.php/c12521

Answer 3

将textblock和Rectangle的visibility属性绑定到viewmodel中的bool，并使用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 4

使用Border或Rectangle方法，您应该能够将装饰器的可见性（边框或矩形）绑定到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}"/>

Answer 5

我建议使用模板标签（文本块不接受模板并输入更多字符 - ）。为了您的方便，我把它包装成一种风格：

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

在WPF中自定义TextBlock

5 个答案: