WPF如何创建像凹陷边界的内部阴影

lsmd5eda  于 2022-12-05  发布在  其他
关注(0)|答案(1)|浏览(343)

我试图完成的内部阴影在下面的形象。

这是一种凹陷的边界看阴影。我设法接近线性渐变填充,但它需要一些模糊。

<Style TargetType="{x:Type local:LargeLabelWithUnitControl}">
    <Setter Property="MaxHeight" Value="80"/>
    <Setter Property="MinHeight" Value="80"/>
    <Setter Property="MaxWidth" Value="130"/>
    <Setter Property="MinWidth" Value="130"/>
    
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:LargeLabelWithUnitControl}">
                <Border BorderThickness="6" CornerRadius="15" >
                    <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="10"
                            >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        
                        <!-- Display the LabelText -->
                        <TextBlock Text="{Binding LabelText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:LargeLabelWithUnitControl}}" 
                                   Foreground="{TemplateBinding Foreground}" 
                                   HorizontalAlignment="Center"
                                   FontSize="50" 
                                   FontFamily="Calibri"/>

                        <!-- Display the UnitText -->
                        <TextBlock Text="{Binding UnitText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:LargeLabelWithUnitControl}}" 
                                   Grid.Row="1"
                                   Foreground="{TemplateBinding Foreground}" 
                                   HorizontalAlignment="Center" 
                                   FontSize="20" 
                                   FontFamily="Calibri"/>
                    </Grid>

                    
                    </Border>
                    <Border.BorderBrush>
                        <LinearGradientBrush StartPoint="0, 0" EndPoint="0.3, 0.8" >
                            <GradientStop Color="#ff095750" Offset="0.0"/>
                            <GradientStop Color="#ff148F7F" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

有人知道怎么做吗?

8zzbczxx

8zzbczxx1#

所以我一直在寻找一个很好的答案来解决这个问题。到目前为止,似乎还没有一个简单或干净的答案。如果你的形状没有圆角(或者你想在矩形的例子中看到的所有边都有阴影),这里的链接是很好的。https://www.codeproject.com/Articles/225076/Creating-Inner-Shadows-for-WPF-and-Silverlight
虽然似乎没有一个很好的解决方案,你想要什么。我已经找到了一些工作,为我的目的,虽然它不是漂亮的一点!

<Grid>
            <Border Background="Yellow"  Width="30" Height="30"  Margin="-2"  BorderThickness="2" CornerRadius="7" >
                <!-- This blue border is hidden by the grey border -->
                <Border Background="Transparent" BorderBrush="Blue" BorderThickness="1,1,0,0" CornerRadius ="5">
                    <Border.Effect>
                        <!-- This is where the actual inneshadow is defined -->
                        <DropShadowEffect  ShadowDepth="0" BlurRadius="4" Color ="Red"/>
                    </Border.Effect>
                </Border>
            </Border>
            
            <!-- Keeps blur radius from leaking out Normally it would be the color of the background -->
            <Border  BorderBrush="Green" Margin="-3" BorderThickness="3" CornerRadius="7" />
            
             <!-- Grey border : If you want a borderless look I would recommend changing 
              this border to the background color as well or changing the size and 
               coverage of the green border -->
            <Border BorderThickness="1" CornerRadius ="5" BorderBrush="Grey" />
        </Grid>

这里是一个链接到结果https://imgur.com/zFh30jb,我添加了古怪的颜色,所以它应该是明确的哪一部分是哪一个。再次这不是一个完美的解决方案,如果有人有任何更好的我会感兴趣。你将不得不搞乱它一点,让它为您的目的工作。
但我希望这对外面的人有帮助!

相关问题