wpf边框文字深度效果

发布于 2024-11-05 05:37:24 字数 743 浏览 5 评论 0原文

在下面的示例中，LinearGradientBrush 为边框提供了一点斜角外观，边框在宽度上拉伸，但高度与普通工具栏类似。边框中的文本块文本看起来像是位于栏的顶部，我很好奇是否有办法使文本看起来位于栏内，而不是位于栏的顶部。感谢您的任何指导。

<Border HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="0" BorderBrush="SlateGray">
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="DimGray" Offset="0" />
            <GradientStop Color="Black" Offset="0.5" />
            <GradientStop Color="Gray" Offset="1" />
        </LinearGradientBrush>
    </Border.Background>
    <TextBlock Text="Check for updates" Foreground="AliceBlue" FontWeight="Bold"/>
</Border>

原文

In the example below, the LinearGradientBrush gives a bit of a beveled look to the border, The border is stretched across the width, but the height is similiar to a average toolbar. The textblock text in the border looks like it's sitting on top of the bar, I'm curious if there is a way to make the text appear to be in the bar, instead of on top of the bar. Thanks for any direction.

<Border HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="0" BorderBrush="SlateGray">
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="DimGray" Offset="0" />
            <GradientStop Color="Black" Offset="0.5" />
            <GradientStop Color="Gray" Offset="1" />
        </LinearGradientBrush>
    </Border.Background>
    <TextBlock Text="Check for updates" Foreground="AliceBlue" FontWeight="Bold"/>
</Border>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一花一树开 2024-11-12 05:37:24

不太确定您在寻找什么，但有两件事使它更加嵌入，即覆盖背景画笔的修改版本并使用文本本身的渐变，但将其照亮，就好像边框内部是弯曲的一样。

<Border HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="0" BorderBrush="SlateGray">
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="DimGray" Offset="0" />
            <GradientStop Color="Black" Offset="0.5" />
            <GradientStop Color="Gray" Offset="1" />
        </LinearGradientBrush>
    </Border.Background>
    <Grid>
        <TextBlock Text="Check for updates" FontWeight="Bold">
            <TextBlock.Foreground>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="DimGray" Offset="0" />
                    <GradientStop Color="AliceBlue" Offset="0.5" />
                    <GradientStop Color="White" Offset="1" />
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>
        <Border>
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.5">
                    <GradientStop Color="DimGray" Offset="0" />
                    <GradientStop Color="Transparent" Offset="0.5" />
                    <GradientStop Color="Gray" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>
    </Grid>
</Border>

Not quite sure what you are looking for but two things that make it more embedded are overlaying a modified version of the background brush and using a gradient for the Text itself, but light it up as if the inside of the border is curved.

<Border HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="0" BorderBrush="SlateGray">
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="DimGray" Offset="0" />
            <GradientStop Color="Black" Offset="0.5" />
            <GradientStop Color="Gray" Offset="1" />
        </LinearGradientBrush>
    </Border.Background>
    <Grid>
        <TextBlock Text="Check for updates" FontWeight="Bold">
            <TextBlock.Foreground>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="DimGray" Offset="0" />
                    <GradientStop Color="AliceBlue" Offset="0.5" />
                    <GradientStop Color="White" Offset="1" />
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>
        <Border>
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.5">
                    <GradientStop Color="DimGray" Offset="0" />
                    <GradientStop Color="Transparent" Offset="0.5" />
                    <GradientStop Color="Gray" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>
    </Grid>
</Border>

screenshot

回复收藏 0 原文