OuterGlowBitmapEffect on Ellipse

I put an OuterGlow an Ellipse and got the problem that the edges are not round :( It seems that WPF uses the Ellipse's Width and Height as Borders for the BitmapEffect ...

My Code:

<Page xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
   <Page.Resources>
    <Style x:Key="Online" TargetType="{x:Type Button}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">
            <Viewbox Stretch="Fill" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
              <Canvas Width="120" Height="120">
                <Ellipse  Canvas.Top="11" Canvas.Left="10" Width="100" Height="100">
                  <Ellipse.Style>
                    <Style  TargetType="{x:Type Ellipse}">
                      <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="False">
                          <Setter Property="Ellipse.Fill">
                            <Setter.Value>
                              <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <LinearGradientBrush.GradientStops>
                                  <GradientStop Offset="0" Color="Black" />
                                  <GradientStop Offset="0.9" Color="Red" />
                                </LinearGradientBrush.GradientStops>
                              </LinearGradientBrush>
                            </Setter.Value>
                          </Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                          <Setter Property="Ellipse.Fill">
                            <Setter.Value>
                              <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <LinearGradientBrush.GradientStops>
                                  <GradientStop Offset="0" Color="DarkRed" />
                                  <GradientStop Offset="0.5" Color="Red" />
                                </LinearGradientBrush.GradientStops>
                              </LinearGradientBrush>
                            </Setter.Value>
                          </Setter>
                          <Setter Property="Ellipse.BitmapEffect">
                            <Setter.Value>
                              <OuterGlowBitmapEffect GlowColor="Red" GlowSize="1"  />
                            </Setter.Value>
                          </Setter>
                        </Trigger>
                      </Style.Triggers>
                    </Style>
                  </Ellipse.Style>
                </Ellipse>
                <Ellipse I@#$TestVisible="False" Canvas.Top="10" Canvas.Left="22.5" Width="75" Height="60" Opacity="0.9">
                  <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                      <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0" Color="White" />
                        <GradientStop Offset="0.9" Color="Transparent" />
                      </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                  </Ellipse.Fill>
                </Ellipse>
                <Ellipse I@#$TestVisible="False" Canvas.Top="86" Canvas.Left="32.5" Width="55" Height="27" Opacity="0.8">
                  <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                      <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.1" Color="Transparent" />
                        <GradientStop Offset="1" Color="White" />
                      </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                  </Ellipse.Fill>
                </Ellipse>
              </Canvas>
            </Viewbox>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>
  <Button Style="{DynamicResource Online}" />

</Page>




Answer this question

OuterGlowBitmapEffect on Ellipse

  • Mike Kendall

    This has already been fixed in our internal builds.  You should see the fix in the February CTP.

    David 

     


  • Steve in Alaska

    Oh cool ;) Thanks for your reply

  • OuterGlowBitmapEffect on Ellipse