希望在WPF中重现某些CSS属性(box-shadow,border-radius,text-shadow)

时间:2015-10-03 11:06:58

标签: c# css wpf

我希望在WPF中创建一个热键页面,我在其中显示应用程序中所有可用热键的图形表示。而不是使用图标,因为我无法找到包含Home键的好集,例如我想使用与StackOverflow类似的样式。

我试图复制并应用以下样式:

F4

CSS是:

kbd {
    padding: 0.1em 0.6em;
    border: 1px solid #CCC;
    font-size: 11px;
    font-family: Arial,Helvetica,sans-serif;
    background-color: #F7F7F7;
    color: #333;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px #FFF inset;
    border-radius: 3px;
    display: inline-block;
    margin: 0px 0.1em;
    text-shadow: 0px 1px 0px #FFF;
    line-height: 1.4;
    white-space: nowrap;
}

我似乎找不到重现盒子阴影(特别是两个),border-radius和text-shadow的方法。

或者,如果有人知道可以使用的键盘键的完整图标设置。

目前有:

<Border BorderThickness="1" CornerRadius="3" Background="#FFF7F7F7"
        HorizontalAlignment="Center" VerticalAlignment="Center">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="1" BlurRadius="3" Color="#33000000" Direction="270"/>
    </Border.Effect>
    <Border BorderThickness="1" CornerRadius="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="1" BlurRadius="3" Color="#FFFFFFFF"/>
        </Border.Effect>
        <TextBlock Padding="1.1 6.6" FontSize="11" FontFamily="Arial,Helvetica,sans-serif" Foreground="#FF333333">HOME</TextBlock>
    </Border>
</Border>

current look

1 个答案:

答案 0 :(得分:1)

试试这个:

<Border HorizontalAlignment="Center" VerticalAlignment="Center"
        Background="#FFF7F7F7"
        BorderThickness="1" BorderBrush="#FFCCCCCC" CornerRadius="3">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="1" BlurRadius="0" Direction="270" Opacity="0.2"/>
    </Border.Effect>
    <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
            BorderThickness="2" BorderBrush="White" CornerRadius="3">
        <TextBlock Padding="1.1 6.6" FontSize="11" FontFamily="Arial,Helvetica,sans-serif" Foreground="#FF333333">
            <TextBlock.Effect>
                <DropShadowEffect BlurRadius="0" Color="White" Direction="270" ShadowDepth="1"/>
            </TextBlock.Effect>
            HOME
        </TextBlock>
    </Border>
</Border>