WPF侧边栏按钮开发疑问：指示灯融合与光晕效果实现

我正在WPF中开发侧边栏菜单，菜单按钮需要包含图标、文字和指示灯元素。目前已经完成图标和文字的实现，并且通过将指示灯替换为带CornerRadius的Border解决了指示灯与圆角矩形的融合问题，但指示灯右侧的光晕效果还没做出来，求可行的实现方案。

初始代码 #

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="45" />
        <ColumnDefinition />
        <ColumnDefinition Width="6" />
    </Grid.ColumnDefinitions>

    <!--  Selected  -->
    <Border
        x:Name="btnSelected"
        Grid.ColumnSpan="3"
        Width="225"
        HorizontalAlignment="Right"
        CornerRadius="10" />
    <!--  Indicator  -->
    <Rectangle
        Name="Indicator"
        Grid.Column="2"
        Width="6"
        Height="42"
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        Fill="{DynamicResource SecundaryBlueColor}"
        RadiusX="0"
        RadiusY="0">
        <Rectangle.BitmapEffect>
            <DropShadowBitmapEffect
                Direction="0"
                ShadowDepth="3"
                Softness="0.6"
                Color="#5B8DEF" />
        </Rectangle.BitmapEffect>
    </Rectangle>
    <!--  Icon  -->
    <Path
        x:Name="Icon"
        Width="24"
        Height="24"
        Margin="0,0,5,0"
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        Data="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type RadioButton}}}"
        Fill="{DynamicResource PrimaryTextColor}"
        Stretch="None" />

    <!--  Text  -->
    <TextBlock
        x:Name="txtName"
        Grid.Column="1"
        Margin="12,0,0,0"
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        FontSize="{TemplateBinding FontSize}"
        FontWeight="{TemplateBinding FontWeight}"
        Foreground="{TemplateBinding Foreground}"
        Text="{TemplateBinding Content}" />
</Grid>

更新后代码 #

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="45" />
        <ColumnDefinition />
        <ColumnDefinition Width="6" />
    </Grid.ColumnDefinitions>

    <!--  Selected  -->
    <Border
        x:Name="btnSelected"
        Grid.ColumnSpan="3"
        Width="225"
        HorizontalAlignment="Right"
        CornerRadius="10" />
    <!--  Indicator  -->
    <Border Name="Indicator" Grid.Column="2" BorderThickness="0" CornerRadius="0,5,5,0">
    </Border>
    <!--  Icon  -->
    <Path
        x:Name="Icon"
        Width="24"
        Height="24"
        Margin="0,0,5,0"
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        Data="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type RadioButton}}}"
        Fill="{DynamicResource PrimaryTextColor}"
        Stretch="None" />

    <!--  Text  -->
    <TextBlock
        x:Name="txtName"
        Grid.Column="1"
        Margin="12,0,0,0"
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        FontSize="{TemplateBinding FontSize}"
        FontWeight="{TemplateBinding FontWeight}"
        Foreground="{TemplateBinding Foreground}"
        Text="{TemplateBinding Content}" />
</Grid>

可行解决方案 #

方案1：使用DropShadowEffect（推荐，替代过时的BitmapEffect）

BitmapEffect在WPF中已被标记为过时，官方推荐使用Effect属性下的DropShadowEffect。给指示灯Border添加该效果，调整参数即可实现右侧光晕：

<!--  Indicator  -->
<Border Name="Indicator" Grid.Column="2" 
        Width="6" Height="42"
        VerticalAlignment="Center"
        Background="{DynamicResource SecundaryBlueColor}"
        BorderThickness="0" CornerRadius="0,5,5,0">
    <Border.Effect>
        <DropShadowEffect 
            Direction="0"  <!-- 0表示光晕方向向右 -->
            ShadowDepth="3"
            BlurRadius="10"  <!-- 控制光晕模糊程度，替代原Softness属性 -->
            Color="#5B8DEF"
            Opacity="0.6"/>
    </Border.Effect>
</Border>

注意：需要给Border设置Background才能显示效果，可通过调整BlurRadius和Opacity参数，获得符合需求的光晕强度。

方案2：多层Border叠加模拟光晕

如果需要更精细的光晕控制，可使用两层Border：底层做扩散光晕，上层为指示灯本体：

<!--  Indicator  -->
<Grid Grid.Column="2" VerticalAlignment="Center">
    <!-- 光晕层 -->
    <Border 
        Width="12" Height="42"
        Background="#5B8DEF"
        Opacity="0.3"
        CornerRadius="0,5,5,0">
        <Border.Effect>
            <BlurEffect Radius="5"/>
        </Border.Effect>
    </Border>
    <!-- 指示灯本体 -->
    <Border 
        Width="6" Height="42"
        Background="{DynamicResource SecundaryBlueColor}"
        CornerRadius="0,5,5,0"/>
</Grid>

这种方式可单独控制光晕的范围、透明度和模糊度，适合需要自定义光晕形态的场景。

内容的提问来源于stack exchange，提问作者Diddlik