代码之家 › 专栏 › 技术社区 › serhio

在WPF中自定义TextBlock

wpf-controls wpf

serhio · 技术社区 · 14 年前

我需要用自定义背景“装饰”一个文本块(比如,当选择时)

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

感谢您的指点。

编辑

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

5 回复 | 直到 14 年前

dcarneiro 14 年前

在类似于border方法的解决方案中,如果您不希望边框的不透明度和textblock之间存在依赖关系,可以使用以下方法:

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

这应该把textblock放在矩形上,因为它们在同一个网格单元上。他们说你只需要改变一下矩形。填充当它被选中时。您可以在矩形样式上使用DataTrigger来实现这一点。

Kimtho6 14 年前

以下是一些想法者的链接: http://www.codeguru.com/cpp/i-n/internet/xml/article.php/c12521

ihatemash 14 年前

将textblock和Rectangle的可见性属性绑定到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}}"/>

Jason 14 年前

使用Border或Rectangle方法,您应该能够将decorator的可见性(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}"/>

Ben 14 年前

我建议使用模板标签(textblock不接受模板,需要输入更多字符-)。为方便起见,我把它包装成:

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