How to fill a Rectangle based on needs - wpf

I'm making a border with Rectangle on all sides. as the borders are so thin the user is not able to put the mouse on it. so I decided to fill with 2 colors so the user will see a small border and it will have more space to place the mouse. so the problem, when I'm filling the corners, I'm not able to fill the L shape. i need to fill topLeft rectangle in L please take a look at the image
Based on question
Why do you want to draw separate rectangles yourself?
as the window style will be none I'm writing a custom resizing I want which side I got the mouse. based on that writing resizing events.
The black boxes has to fill with yellow
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Grips -->
<!-- Sides -->
<Rectangle StrokeThickness="1" Grid.Column="1" Grid.Row="2" Name="bottom" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="1" Name="left" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.5" />
<GradientStop Color="White" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="1" Name="right" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="0" Name="topLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="2" Name="bottomLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="2" Name="bottomRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Row="0" Grid.Column="1" Name="top" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="Yellow" Offset="0.5" />
<GradientStop Color="White" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="0" Name="topRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<!--Content-->
</Grid>
Here are the 3 borders. how can I fill in that L shape thank you


New solution, try like this and compile to see if it works:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Grips -->
<!-- Sides -->
<Rectangle StrokeThickness="1" Grid.Column="1" Grid.Row="2" Name="bottom" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Name="left" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Width="1" Grid.RowSpan="2" HorizontalAlignment="Left" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="1" Name="right" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="0" Name="topLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Fill="#02FFFFFF" Panel.ZIndex="1" />
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="2" Name="bottomLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="2" Name="bottomRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Row="0" Name="top" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Fill="Yellow" Height="1" VerticalAlignment="Top" Grid.ColumnSpan="2" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="0" Name="topRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<!--Content-->
</Grid>


You could add another grid into the corner instead of a rectangle (orange to see what changed):
<Grid Grid.Column="0" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="0" Fill="OrangeRed"/>
<Rectangle StrokeThickness="1" Grid.Column="1" Grid.Row="0" Fill="OrangeRed"/>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="1" Fill="OrangeRed"/>
</Grid>


If you want the corner mouse in that area, try this code instead.
The only change I made was setting the top corner to second column again, left corner to second row and filled your topLeftRectangle with the yellow color. Like this, that area can have different mouse:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Grips -->
<!-- Sides -->
<Rectangle StrokeThickness="1" Grid.Column="1" Grid.Row="2" Name="bottom" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="1" Name="left" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="1" Name="right" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="0" Name="topLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Fill="Yellow" >
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="2" Name="bottomLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="2" Name="bottomRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Row="0" Grid.Column="1" Name="top" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Fill="Yellow" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="0" Name="topRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<!--Content-->
</Grid>

Related

WPF deforms opacity mask

I'm trying to achieve this:
The gradient proportion will grow so I did a circle as opacityMask then a recangle using the circle as mask, like that:
<Ellipse Name="Mask"
Fill="Red"
Width="{Binding ActualWidth, ElementName=mainGrid}" Grid.ColumnSpan="3"
Visibility="Visible"/>
<Rectangle Name="Gradient" Fill="Azure"
Grid.Column="2" Width="100"
HorizontalAlignment="Left"
VerticalAlignment="Stretch">
<Rectangle.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask}" />
</Rectangle.OpacityMask>
</Rectangle>
and I get this:
How do I keep the rectangle's form and mask it using the circle ??

This should work:
<VisualBrush Visual="{Binding ElementName=Mask}"
Stretch="None" AlignmentX="Left" AlignmentY="Top"/>

So you need something like this:
<Border Name="Mask"
Background="White"
Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
</Border>
<Ellipse Name="gradient"
Stroke="Black"
StrokeThickness="1"
Width="{Binding ActualWidth, ElementName=mainGrid}" Grid.ColumnSpan="3"
Visibility="Visible">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0" > >
<GradientStop Color="Green" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Ellipse.Fill>
<Ellipse.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask}"
Stretch="None"
AlignmentX="Right"
AlignmentY="Top" />
</Ellipse.OpacityMask>
</Ellipse>
<Border Name="Mask2"
Grid.Column="0"
Background="White"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
</Border>
<Ellipse Name="BlueEllipse"
Fill="Blue"
Stroke="Black"
StrokeThickness="1"
Width="{Binding ActualWidth, ElementName=mainGrid}"
Grid.ColumnSpan="3" >
<Ellipse.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask2}"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top"/>
</Ellipse.OpacityMask>
</Ellipse>
To achive what the original image is.

Datepicker that is always open

I'm trying to customize the WPF datepicker so that the user doesn't have to click a button to open the picker but that it is always visible.
I've set the PART_Popup to IsOpen = true and StaysOpen = true but that doesn't do the trick..
<Window x:Class="WPFDatePickerSample.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300">
<Window.Resources>
<Style TargetType="DatePicker">
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="IsTodayHighlighted" Value="True" />
<Setter Property="SelectedDateFormat" Value="Short" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="3,2,0,2"/>
<!--<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint=".5,0" StartPoint=".5,1">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>-->
<Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}">
<Border.Child>
<Grid x:Name="PART_Root"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.Resources>
<!-- Main DatePicker Brushes -->
<SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF" />
<!-- Button Template -->
<ControlTemplate x:Key="DropDownButtonTemplate" TargetType="Button">
<Grid>
<!--Start UI-->
<Grid Height="20" Width="20" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Background="#11FFFFFF" FlowDirection="LeftToRight">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="23*"/>
<RowDefinition Height="19*"/>
<RowDefinition Height="19*"/>
<RowDefinition Height="19*"/>
</Grid.RowDefinitions>
<Border Margin="-1" Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderThickness="1" BorderBrush="#FF45D6FA" Opacity="0" CornerRadius="0,0,1,1" x:Name="Highlight"/>
<Border x:Name="Background" Margin="0,-1,0,0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderThickness="1" BorderBrush="#FFFFFFFF" Opacity="1" CornerRadius=".5" Background="#FF1F3B53"/>
<Border x:Name="BackgroundGradient" Margin="0,-1,0,0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderThickness="1" BorderBrush="#BF000000" Opacity="1" CornerRadius=".5">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.48,-1" StartPoint="0.48,1.25">
<GradientStop Color="#FF494949"/>
<GradientStop Color="#FF9F9F9F" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.3,-1.1" StartPoint="0.46,1.6">
<GradientStop Color="#FF4084BD"/>
<GradientStop Color="#FFAFCFEA" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Path HorizontalAlignment="Center" Margin="4,3,4,3" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Grid.Column="0" Grid.Row="1" Fill="#FF2F2F2F" Stretch="Fill" Data="M11.426758,8.4305077 L11.749023,8.4305077 L11.749023,16.331387 L10.674805,16.331387 L10.674805,10.299648 L9.0742188,11.298672 L9.0742188,10.294277 C9.4788408,10.090176 9.9094238,9.8090878 10.365967,9.4510155 C10.82251,9.0929432 11.176106,8.7527733 11.426758,8.4305077 z M14.65086,8.4305077 L18.566387,8.4305077 L18.566387,9.3435936 L15.671368,9.3435936 L15.671368,11.255703 C15.936341,11.058764 16.27293,10.960293 16.681133,10.960293 C17.411602,10.960293 17.969301,11.178717 18.354229,11.615566 C18.739157,12.052416 18.931622,12.673672 18.931622,13.479336 C18.931622,15.452317 18.052553,16.438808 16.294415,16.438808 C15.560365,16.438808 14.951641,16.234707 14.468243,15.826504 L14.881817,14.929531 C15.368796,15.326992 15.837872,15.525723 16.289043,15.525723 C17.298809,15.525723 17.803692,14.895514 17.803692,13.635098 C17.803692,12.460618 17.305971,11.873379 16.310528,11.873379 C15.83071,11.873379 15.399232,12.079271 15.016094,12.491055 L14.65086,12.238613 z" Grid.ColumnSpan="4" Grid.RowSpan="3"/>
<Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#FFFFFFFF" StrokeThickness="0" Grid.ColumnSpan="4" Width="3" Height="3"/>
<Border Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderThickness="1" BorderBrush="#B2FFFFFF" Opacity="0" CornerRadius="0,0,.5,.5" x:Name="DisabledVisual"/>
</Grid>
<!--End UI-->
</Grid>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox x:Name="PART_TextBox"
Grid.Row="0" Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
BorderThickness="1"
Text="Selecteer datum" MinHeight="20"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center" >
</TextBox>
<Grid x:Name="PART_DisabledVisual"
Opacity="0"
IsHitTestVisible="False"
Grid.Row="0" Grid.Column="0"
Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" RadiusX="1" RadiusY="1" Fill="#A5FFFFFF"/>
<Rectangle Grid.Row="0" Grid.Column="1" RadiusX="1" RadiusY="1" Fill="#A5FFFFFF" Height="18" Width="19" Margin="3,0,3,0" />
<Popup x:Name="PART_Popup"
PlacementTarget="{Binding ElementName=PART_TextBox}"
Placement="Bottom"
IsOpen="True"
StaysOpen="True"
AllowsTransparency="True" />
</Grid>
</Grid>
</Border.Child>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<DatePicker></DatePicker>
</Grid>

I used Calendar instead of DatePicker to achieve my goal.

You have direct Dependency property in DatePicker for this. Please make use of the property in IsDropDownOpen = true. Hope your question is answered.
<DatePicker IsDropDownOpen="True" ></DatePicker>
Regards,
Abdul Rahman A.H.

how to get to Grid x:Name="ControlPanelGrid"

I have the following xaml and I am trying to get to the Grid to make it invisible at some point in my code if the code reaches there. Being new to .net and silverlight and xaml I am not sure why my code behind doesn't find Grid Controlpanel
please see my xaml code here
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:smf="clr-namespace:Microsoft.SilverlightMediaFramework.Core;assembly=Microsoft.SilverlightMediaFramework.Core" xmlns:smfm="clr-namespace:Microsoft.SilverlightMediaFramework.Core.Media;assembly=Microsoft.SilverlightMediaFramework.Core" xmlns:plugins3d="clr-namespace:Microsoft.SilverlightMediaFramework.Plugins.Primitives.S3D;assembly=Microsoft.SilverlightMediaFramework.Plugins" xmlns:Microsoft_SilverlightMediaFramework_Utilities_Offline="clr-namespace:Microsoft.SilverlightMediaFramework.Utilities.Offline;assembly=Microsoft.SilverlightMediaFramework.Utilities" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:smf_util="http://schemas.microsoft.com/smf/2010/xaml/converters" xmlns:smf_accesscontrols="http://schemas.microsoft.com/smf/2010/xaml/accesscontrols" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
x:Class="SPlayer.MainPage"
d:DesignHeight="300" d:DesignWidth="400" mc:Ignorable="d">
<UserControl.Resources>
................
................
<Style x:Key="SMFPlayerStyle1" TargetType="smf:SMFPlayer">
<Setter Property="Background" Value="Black"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Template">
.......
......
<Grid x:Name="ControlPanelGrid" Margin="8,-26,8,13" Grid.Row="1" Grid.RowSpan="4" Opacity="0">
<Rectangle x:Name="ControlPanel" Margin="2,3,3,5" Stroke="#FF474747" RadiusY="4" RadiusX="4" Opacity="0.9" StrokeThickness="0.5">
<Rectangle.Effect>
<DropShadowEffect Opacity="0.26" BlurRadius="7" Direction="319"/>
</Rectangle.Effect>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF191919" Offset="0.936"/>
<GradientStop Color="#FF454545" Offset="0.187"/>
<GradientStop Color="#FF191919"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid x:Name="timelinecontrols" Grid.ColumnSpan="1" Margin="0,0,165,13" d:LayoutOverrides="GridBox" d:IsHidden="True">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<smf:Timeline x:Name="TimelineElement" Cursor="Hand" Chapters="{TemplateBinding Chapters}" EndPosition="{TemplateBinding EndPosition}" Foreground="{x:Null}" HorizontalContentAlignment="Stretch" IsLive="{TemplateBinding IsMediaLive}" LivePosition="{TemplateBinding LivePosition}" Margin="80,0,170,-10" StartPosition="{TemplateBinding StartPosition}" TimelineMarkers="{TemplateBinding TimelineMarkers}" VerticalAlignment="Center" Style="{StaticResource TimelineStyle1}" />
<Border x:Name="TimeContainer" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Left" Margin="0" Opacity="0">
<Grid Height="28" MaxHeight="28" MinWidth="60" MinHeight="28" UseLayoutRounding="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.367*"/>
<ColumnDefinition Width="0.383*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="CurrentPositionElement" Foreground="#FFC1C1C1" FontSize="9" HorizontalAlignment="Left" Padding="8,0,0,0" TextAlignment="Center" Text="{Binding PlaybackPosition, Converter={StaticResource TimeSpanValueConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center"/>
<TextBlock x:Name="TimeSeparatorElement" Grid.Column="1" Foreground="#FFFDFAFA" FontSize="9" HorizontalAlignment="Center" Margin="3,0" Opacity="0.4" Text="|" VerticalAlignment="Center"/>
<TextBlock x:Name="CurrentDurationElement" Grid.Column="2" Foreground="#FFFDFDFD" FontSize="9" HorizontalAlignment="Left" Opacity="0.4" Padding="0,0,8,0" Text="{Binding EndPosition, Converter={StaticResource TimeSpanValueConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center"/>
</Grid>
</Grid>
</Border>
</Grid>
<Image x:Name="btnVloume" Margin="0,-1,383,5" Source="volume.png" Stretch="Fill" Height="49" d:LayoutOverrides="Width, GridBox" Width="53" HorizontalAlignment="Right" d:IsHidden="True"/>
<smf:VolumeControl x:Name="VolumeElement" VolumeLevel=".5" RenderTransformOrigin="0.5,0.5" Margin="0,-46.5,326.074,-50.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Right" Width="36" Style="{StaticResource VolumeControlStyle1}" d:IsHidden="True" >
<smf:VolumeControl.RenderTransform>
<CompositeTransform Rotation="90.02"/>
</smf:VolumeControl.RenderTransform>
</smf:VolumeControl>
<ToggleButton x:Name="FullScreenToggleElement" BorderThickness="0" Cursor="Hand" HorizontalAlignment="Right" HorizontalContentAlignment="Stretch" Height="28" Margin="0,14,153,11" Padding="0" Style="{StaticResource FullScreenElementStyle}" VerticalContentAlignment="Stretch" Width="29" d:LayoutOverrides="HorizontalAlignment" Opacity="0"/>
<Image x:Name="_3D" HorizontalAlignment="Right" Margin="0,1,180,3" Source="3D.png" Stretch="Fill" Width="53" Height="49" Cursor="Hand" Opacity="0.8" MouseLeftButtonUp="_3D_MouseLeftButtonUp">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction x:Name="_3d_100_Opacity" PropertyName="Opacity" Value="1"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction x:Name="_3d_80_Opacity" PropertyName="Opacity" Value="0.8"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
<Image x:Name="analytics" HorizontalAlignment="Left" Margin="980,3,0,-1" Source="analytics.png" Stretch="Fill" Width="53" Cursor="Hand" Opacity="0.7">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction x:Name="analytics_MouseEnter" PropertyName="Opacity" Value="1"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction x:Name="analytics_MouseLeave" PropertyName="Opacity" Value="0.7"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
<Image x:Name="btn_fullscreen" HorizontalAlignment="Right" Margin="0,0,140,4" Source="full_screen.png" Stretch="Fill" Width="53" Height="49" Opacity="0.8" Cursor="Hand">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction x:Name="btn_fullscreen_mouseOver" PropertyName="Opacity" Value="1"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction x:Name="btn_fullscreen_mouseOut" PropertyName="Opacity" Value="0.8"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
<smf:PlayElement x:Name="PlayElement" Content="PlayElement" PlayState="{TemplateBinding PlayState}" HorizontalAlignment="Left" Height="51" Margin="9,2,0,0" Style="{StaticResource PlayElementStyle1}" Width="53" Cursor="Hand" />
<Image Margin="0,4,5,8" Source="logo.png" Stretch="Fill" HorizontalAlignment="Right" Width="96"/>
</Grid>
<Grid x:Name="ControllerContainer" Height="40" Grid.Row="4" Visibility="{Binding IsControlStripVisible, Converter={StaticResource BoolToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0">
<Grid.Background>
<LinearGradientBrush EndPoint="0.481481,1" StartPoint="0.481481,0.00636957">
<GradientStop Color="#FF78808B" Offset="0"/>
<GradientStop Color="#FF58606A" Offset="0.287958"/>
<GradientStop Color="#FF38424E" Offset="0.680628"/>
<GradientStop Color="#FF333D49" Offset="0.984293"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid x:Name="playercontrols" Grid.ColumnSpan="1" Margin="19,0,16,0" Opacity="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="ReplayElement" BorderThickness="0" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource ReplayButtonStyle}" Width="36"/>
<Button x:Name="RewindElement" BorderThickness="0,1,0,0" Grid.Column="1" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource RWButtonStyle}" Width="36">
<Button.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Button.BorderBrush>
</Button>
<smf:PlayElement Cursor="Hand" Grid.Column="2" Margin="0" PlayState="{TemplateBinding PlayState}" Width="60"/>
<Button x:Name="FastForwardElement" BorderThickness="0" Grid.Column="3" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource FFButtonStyle}" Width="36"/>
<ToggleButton x:Name="SlowMotionElement" Grid.Column="4" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource SlowMotionButtonStyle}" ToolTipService.ToolTip="Slow Motion" Width="36"/>
</Grid>
<Grid x:Name="divider1" Grid.Column="1" HorizontalAlignment="Left" Width="2">
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Margin="1,0,0,0" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFDFEFF" Offset="0.509"/>
<GradientStop Color="#FF36404C" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
<Grid x:Name="divider2" Grid.Column="3" HorizontalAlignment="Left" Width="2" Opacity="0">
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Margin="1,0,0,0" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFDFEFF" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0.009"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
<Grid x:Name="functioncontrols" Grid.ColumnSpan="1" Grid.Column="4" Margin="16,0" Opacity="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ToggleButton x:Name="CaptionToggleElement" Cursor="Hand" Content="CC" Grid.Column="0" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource CaptionDisplayToggleButtonStyle}" ToolTipService.ToolTip="Closed Captions" Width="36" d:LayoutOverrides="GridBox"/>
<ToggleButton x:Name="GraphToggleElement" Cursor="Hand" Content="G" Grid.Column="1" Height="28" Style="{StaticResource PlayerGraphButtonStyle}" ToolTipService.ToolTip="Toggle Graph" Width="36"/>
<ComboBox x:Name="AudioStreamSelectionElement" BorderBrush="{StaticResource btnBaseGradient}" Background="Black" Cursor="Hand" Grid.ColumnSpan="1" Grid.Column="3" Foreground="Black" HorizontalAlignment="Right" Height="28" ItemsSource="{TemplateBinding AvailableAudioStreams}" Margin="0" Style="{StaticResource AudioStreamMenu}" SelectedItem="{TemplateBinding SelectedAudioStream}" Width="110">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Foreground="{StaticResource iconGradient}" Text="{Binding Name}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid>
<Grid x:Name="divider3" Grid.Column="5" HorizontalAlignment="Left" Height="40" Margin="0" Width="2" Opacity="0">
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Margin="1,0,0,0" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFDFEFF" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
<smf:BitrateMonitor x:Name="BitrateMonitorElement" Grid.Column="6" HighDefinitionBitrate="{TemplateBinding HighDefinitionBitrate}" Height="40" Margin="5,0,7,0" MaximumPlaybackBitrate="{TemplateBinding MaximumPlaybackBitrate}" PlaybackBitrate="{TemplateBinding PlaybackBitrate}" Width="36" Opacity="0"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<smf:SMFPlayer x:Name="smfPlayer" Style="{StaticResource SMFPlayerStyle1}" PlaylistVisibility="Disabled"/>
</Grid>
</UserControl>
here is my code behind file
namespace SPlayer
{
public partial class MainPage : UserControl
{
.........
public MainPage(StartupEventArgs e)
{
......
as you can see my namespace is correct in xaml but I still cant access the grid <Grid x:Name="ControlPanelGrid" Margin="8,-26,8,13" Grid.Row="1" Grid.RowSpan="4" Opacity="0">
thanks

In your C# code you can use the FindChild<T> found in this SO question
It would look something like:
Grid controlPanelGrid = UIHelper.FindChild<Grid>(smfPlayer, "ControlPanelGrid");

For clarification: your Grid ControlPanelGrid is a child of SMFPlayerStyle1 in the resources of your UserControl?
<UserControl.Resources>
<Style x:Key="SMFPlayerStyle1" TargetType="smf:SMFPlayer">
[...]
<Grid x:Name="ControlPanelGrid" Margin="8,-26,8,13" Grid.Row="1" Grid.RowSpan="4" Opacity="0">
[...]
</Style>
</UserControl.Resources>
To access this element programatically, you need to dive down the object graph starting with SMFPlayerStyle1.... Depending on structure of the SMFPlayer object you may be able to access it through a property of this.

how to change the color of the circle inside radio button

I want to change only the color inside the radio button when clicked. I mean the tiny dot inside the circle.
How in WPF can i do this?
I tried this code but it is saying the content is set more than once
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<StackPanel Orientation="Horizontal">
<Grid Width="40" Height="40">
<Ellipse Name="MainEllipse" Width="40" Height="40">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC8C8C8" Offset="0" />
<GradientStop Color="#FFF7F7F7" Offset="0.991" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="10,10,10,10"
Fill="#C0C0C0"
Width="Auto"
Height="Auto" />
<Ellipse x:Name="Selected"
Margin="10,10,10,10"
Width="Auto"
Height="Auto">
<Ellipse.Fill>
<SolidColorBrush Color="Navy" />
</Ellipse.Fill>
</Ellipse>
</Grid>
<ContentPresenter Margin="5,0,0,0" VerticalAlignment="Center" />
</StackPanel>
</BulletDecorator.Bullet>
</BulletDecorator>
Thanks in advance,
John.

Move your ContentPresenter outside of your StackPanel. Actually, you don't appear to need the StackPanel at all:
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="40" Height="40">
<Ellipse Name="MainEllipse" Width="40" Height="40">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC8C8C8" Offset="0" />
<GradientStop Color="#FFF7F7F7" Offset="0.991" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="10,10,10,10"
Fill="#C0C0C0"
Width="Auto"
Height="Auto" />
<Ellipse x:Name="Selected"
Margin="10,10,10,10"
Width="Auto"
Height="Auto">
<Ellipse.Fill>
<SolidColorBrush Color="Navy" />
</Ellipse.Fill>
</Ellipse>
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter Margin="5,0,0,0" VerticalAlignment="Center" />
</BulletDecorator>

This page might help you: http://social.msdn.microsoft.com/forums/en-US/wpf/thread/35639a99-b2b2-4fe9-955d-775cb88ead43
It involves setting up a custom style for RadioButton.

RadialGradientBrush on Rounded-Corner Rectangle

I have a Rectangle with rounded corners (but not an ellipse), something like this:
<Rectangle Stroke="Black" StrokeThickness="2" RadiusX="50" RadiusY="100">
<Rectangle.Fill>
<RadialGradientBrush RadiusY="0.5">
<GradientStop Color="Black" Offset="1" />
<GradientStop Color="White" Offset="0.8" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
I want to use a gradient fill from black to white. How can I specify this in order to make the fill keep the shape of the rounded rectangle, instead of being an ellipse?

For a rounded rectangle you can do it all in XAML using radial gradients for the corners and linear gradients for the sides.
The example uses a ViewBox so the Size doesn't need to be set both on the grid and its clip path. If you need it to resize keeping the same border radius you could bind RectangleGeometry.Rect and use a ValueConverter. The gradient and the RadiusX and RadiusY properties can be easily changed in one place.
<Viewbox Stretch="Fill">
<Grid Width="100" Height="100">
<Grid.Resources>
<Color x:Key="inside">White</Color>
<GradientStopCollection x:Key="gradient">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="{DynamicResource inside}" Offset="0.2"/>
</GradientStopCollection>
</Grid.Resources>
<Grid.Clip>
<RectangleGeometry RadiusX="15" RadiusY="30" Rect="0,0,100,100" x:Name="clip" />
</Grid.Clip>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding RadiusX, ElementName=clip}" />
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="{Binding RadiusX, ElementName=clip}" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding RadiusY, ElementName=clip}"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="{Binding RadiusY, ElementName=clip}"/>
</Grid.RowDefinitions>
<Rectangle Grid.Column="1" Margin="-1,0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0" MappingMode="RelativeToBoundingBox" StartPoint="0,1" GradientStops="{DynamicResource gradient}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Column="2" Grid.Row="1" Margin="0,-1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0" MappingMode="RelativeToBoundingBox" StartPoint="0,0" GradientStops="{DynamicResource gradient}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Column="1" Grid.Row="2" Margin="-1,0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0" GradientStops="{DynamicResource gradient}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Row="1" Margin="0,-1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0" MappingMode="RelativeToBoundingBox" StartPoint="1,0" GradientStops="{DynamicResource gradient}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Column="1" Grid.Row="1" Margin="-1">
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource inside}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle>
<Rectangle.Fill>
<RadialGradientBrush Center="1,1" RadiusX="1" RadiusY="1" GradientOrigin="1,1" GradientStops="{DynamicResource gradient}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Column="2">
<Rectangle.Fill>
<RadialGradientBrush Center="0,1" RadiusX="1" RadiusY="1" GradientOrigin="0,1" GradientStops="{DynamicResource gradient}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Column="2" Grid.Row="2">
<Rectangle.Fill>
<RadialGradientBrush Center="0,0" RadiusX="1" RadiusY="1" GradientOrigin="0,0" GradientStops="{DynamicResource gradient}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Row="2">
<Rectangle.Fill>
<RadialGradientBrush Center="1,0" RadiusX="1" RadiusY="1" GradientOrigin="1,0" GradientStops="{DynamicResource gradient}" />
</Rectangle.Fill>
</Rectangle>
</Grid>
</Viewbox>
If you need to a gradient to follow more complex shapes you can do it with a V3.0 PixelShader.

Here is a simple example composing a rounded-rectangle gradient out of more primitive gradients:
<Canvas>
<Canvas.Resources>
<GradientStopCollection x:Key="stops">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</GradientStopCollection>
<RadialGradientBrush x:Key="cornerBrush" GradientStops="{StaticResource stops}"/>
<LinearGradientBrush x:Key="topBrush" StartPoint="0,1" EndPoint="0,0" GradientStops="{StaticResource stops}"/>
<LinearGradientBrush x:Key="leftBrush" StartPoint="1,0" EndPoint="0,0" GradientStops="{StaticResource stops}"/>
<LinearGradientBrush x:Key="rightBrush" StartPoint="0,0" EndPoint="1,0" GradientStops="{StaticResource stops}"/>
<LinearGradientBrush x:Key="bottomBrush" StartPoint="0,0" EndPoint="0,1" GradientStops="{StaticResource stops}"/>
</Canvas.Resources>
<Ellipse Canvas.Left="0" Canvas.Top="0" Width="100" Height="100" Fill="{StaticResource cornerBrush}"/>
<Ellipse Canvas.Left="200" Canvas.Top="0" Width="100" Height="100" Fill="{StaticResource cornerBrush}"/>
<Ellipse Canvas.Left="0" Canvas.Top="200" Width="100" Height="100" Fill="{StaticResource cornerBrush}"/>
<Ellipse Canvas.Left="200" Canvas.Top="200" Width="100" Height="100" Fill="{StaticResource cornerBrush}"/>
<Rectangle Canvas.Left="50" Canvas.Top="0" Width="200" Height="50" Fill="{StaticResource topBrush}"/>
<Rectangle Canvas.Left="0" Canvas.Top="50" Width="50" Height="200" Fill="{StaticResource leftBrush}"/>
<Rectangle Canvas.Left="250" Canvas.Top="50" Width="50" Height="200" Fill="{StaticResource rightBrush}"/>
<Rectangle Canvas.Left="50" Canvas.Top="250" Width="200" Height="50" Fill="{StaticResource bottomBrush}"/>
<Rectangle Canvas.Left="50" Canvas.Top="50" Width="200" Height="200" Fill="White"/>
</Canvas>
which produces this effect:

Resources