Как сделать светящийся эффект только снаружи? - PullRequest
Новая
       16

Как сделать светящийся эффект только снаружи?

0 голосов
/ 10 января 2019

То, что я хочу, это тень только снаружи от границы кнопки, а не тень внутри. Есть ли способ сделать это в стиле кнопки?

https://stackoverflow.com/a/11124369/7402089 Нашел то, что мне было нужно, но тень есть как внутри, так и снаружи границы. Я пытался искать среди DropShadowEffect свойств и Border свойств или искать в Интернете, но ничего не нашел. 

<Style x:Key="GlowingBorder" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Margin="10" Background="Transparent"
                        BorderBrush="#171e25" BorderThickness="1" Opacity="1.0"
                        CornerRadius="{TemplateBinding Border.CornerRadius}">
                    <Border.Effect>
                        <DropShadowEffect ShadowDepth="0"
                                          Color="#72f4aa"
                                          Opacity="1"
                                          BlurRadius="6"/>
                    </Border.Effect>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Ожидается: тень снаружи, тени внутри границы. Заполненная кнопка с цветом рамки. Текущий результат: тень как внутри, так и снаружи границы. Свойства Foreground и Background внутри Style не действуют, а кнопка Context не показывает ни того, ни другого. Не знаю почему.

Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Как насчет этого: 

<Style x:Key="GlowingBorder" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                   <Border Margin="10" Background="Transparent"
                           BorderBrush="#171e25" BorderThickness="1" Opacity="1.0"
                           CornerRadius="{TemplateBinding Border.CornerRadius}">
                       <Border.Effect>
                           <DropShadowEffect ShadowDepth="0"
                                          Color="#72f4aa"
                                          Opacity="1"
                                          BlurRadius="6"/>
                       </Border.Effect>
                   </Border>
                   <Border BorderBrush="#171e25" BorderThickness="1" 
                       Background="{TemplateBinding Background}" 
                       CornerRadius="{TemplateBinding Border.CornerRadius}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Это должно работать для всех кнопок, которые не имеют прозрачного фона, потому что вы накладываете другой элемент Border поверх светящегося, тем самым перекрывая внутреннее свечение.

0 голосов
/ 10 января 2019

Я не проверял это, но я предполагаю, что фон вашей кнопки прозрачен. Может быть, обычно тень находится только снаружи, но из-за того, что внутренняя часть прозрачна, вы можете видеть сквозь кнопку, заставляя ее светиться и внутри.

РЕДАКТИРОВАТЬ: Очевидно, вы можете добавить отступ к эффекту, который может решить вашу проблему: https://www.oreilly.com/library/view/hlsl-and-pixel/9781449324995/ch04.html

Нашел это на сайте, на который я ссылался:

Padding

...