There is not doubt about it. I love XAML! Coming from someone with a web application background, I understand the importance of using markup to define visual traits of an application. I also understand that the transition from HTML to XAML is very smooth and will lead to a new generation of .NET developers who design user experiences for both the desktop and web. What I have yet to see, is a complex User Interface written without a lot of unnecessary code-behind. XAML was designed so that you keep all of your user-interface logic in the markup and your business logic will dominate your code behind and libraries. Unfortunately, I have yet to see this pattern manifest.
The problem is not just in WPF/SV3 code samples from co-workers and friends, but even online with tutorials and code samples. I would think that most of the MSDN and Microsoft-based web samples would encourage the use of Triggers, Behaviors and Styles as opposed to code-behind logic. Here’s an example of what I mean http://msdn.microsoft.com/en-us/magazine/cc163421.aspx. Many of the things that the code-behind is used for can easily be done with behaviors and triggers. Instead these features are treated as “nifty” and “advanced” thus alienating the common developer from using them. I was an immediate WPF/SV2 convert and it took me almost a year to fully understand the power of XAML.
So here’s the point. Every time there is a new release looming for Silverlight, I step back and try to develop an interactive user interface without any code-behind at all. I even go as far as to not write library classes and behaviors by hand, but sometimes that just can’t be helped. I usually imagine a product that’s being used for an elementary school. These products normally need good animation, have to be colorful and would need to be VERY interactive. Sometimes I do throw in LOB (line-of-business) components in there just to see what they would look like. This project was done using WPF 4 & Silverlight 4 Here is a sample of the project:
I found that WPF was FAR easier to develop with. Silverlight does have the advantage of industry acceptance and reach, but it is (sort of) a subset of WPF. The XAML for the WPF version is posted below for your review:
<Window x:Class="TBLLayout.FunWindow"
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: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"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
xmlns:p="clr-namespace:TBLLayout.Properties"
xmlns:cm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
xmlns:l="clr-namespace:TBLLayout"
mc:Ignorable="d"
Title="{Binding Title, Mode=OneWay, Source={x:Static p:Settings.Default}}"
UseLayoutRounding="True"
Width="960" Height="720">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<Storyboard x:Key="Ellipse.MouseEnter">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="corner">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="35"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="corner">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="15"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="menu">
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="smile">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="15"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="smile">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="35"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Ellipse.MouseLeave">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="corner">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="corner">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="menu">
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="smile">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="smile">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Style x:Key="AlternatingBoxStyle" TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#FFEFD79E" />
<Setter Property="Foreground" Value="#FF352006" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#FF050845" />
<Setter Property="Foreground" Value="#FFCCEDFB" />
</Trigger>
</Style.Triggers>
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style x:Key="MenuButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#FF707070"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="#FF3F3F3F"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="Button.Press">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0:0:0.25" Value="#FFC3C5C6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0:0:0.25" Value="#FF236B7E"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Button.UnPress">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0:0:0.25" Value="#00000000"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0:0:0.25" Value="#FFBFEAF5"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="border" Background="#FFBFEAF5" CornerRadius="10" BorderThickness="2" BorderBrush="#00000000" Opacity="0.85">
<Border.Effect>
<DropShadowEffect Color="#FF226278" ShadowDepth="5" Opacity="0.695"/>
</Border.Effect>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#FF71B8CA"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FF9F9F9F"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
<Setter Property="Background" TargetName="border" Value="#FFDBE5E7"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Button.Press}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="ItemTemplate">
<StackPanel>
<TextBlock Text="{Binding Code}"/>
</StackPanel>
</DataTemplate>
<Storyboard x:Key="Tab.MouseEnter">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="bottomBar">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Tab.MouseLeave">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="bottomBar">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Color x:Key="PlainGray">#FFD8D8D8</Color>
<DataTemplate x:Key="WordsItemTemplate">
<Border BorderThickness="1" BorderBrush="Black" Padding="2,1" Background="#FF3B0909">
<Grid Height="29.733" Width="109.763">
<TextBlock Text="{Binding EmployeeCount}" Margin="0" HorizontalAlignment="Left" d:LayoutOverrides="Height" VerticalAlignment="Top" FontSize="8" FontWeight="Bold" Foreground="#FFD8B1B1"/>
<TextBlock Text="{Binding Name}" Margin="0,12,0,0" d:LayoutOverrides="Width, Height" HorizontalAlignment="Left" VerticalAlignment="Top" FontWeight="Bold" FontSize="13.333" Foreground="#FFD8B1B1"/>
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Key="WordsItemTemplate1">
<StackPanel>
<TextBlock Text="{Binding EmployeeCount}"/>
<Image Source="{Binding Icon}" HorizontalAlignment="Left" Height="64" Width="64"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="topBar">
<BeginStoryboard x:Name="Ellipse_MouseEnter_BeginStoryboard" Storyboard="{StaticResource Ellipse.MouseEnter}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="topBar">
<BeginStoryboard x:Name="Ellipse_MouseLeave_BeginStoryboard" Storyboard="{StaticResource Ellipse.MouseLeave}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="bottomBar">
<BeginStoryboard x:Name="Tab_MouseEnter_BeginStoryboard" Storyboard="{StaticResource Tab.MouseEnter}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="bottomBar">
<BeginStoryboard x:Name="Tab_MouseLeave_BeginStoryboard" Storyboard="{StaticResource Tab.MouseLeave}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="starList">
<BeginStoryboard x:Name="Tab_MouseEnter_BeginStoryboard1" Storyboard="{StaticResource Tab.MouseEnter}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="starList">
<BeginStoryboard x:Name="Tab_MouseLeave_BeginStoryboard1" Storyboard="{StaticResource Tab.MouseLeave}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<Grid x:Name="topBar" Height="150" Margin="-40,-100,0,0" VerticalAlignment="Top">
<Ellipse x:Name="corner" Margin="5" Width="150" RenderTransformOrigin="0.5,0.5" Fill="#FFE3E72E" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Effect>
<BlurEffect Radius="20"/>
</Ellipse.Effect>
</Ellipse>
<Grid x:Name="menu" Height="35" Margin="40,0,0,15" VerticalAlignment="Bottom" Opacity="0">
<Grid.Resources>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MenuButtonStyle}">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Margin" Value="5,0" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.15*"/>
</Grid.ColumnDefinitions>
<Path x:Name="bar" Data="M0,0 L206.27699,0 282.99999,0 364.72299,0 364.58949,0.45385981 C360.5183,12.556008 326.66245,22 285.49999,22 L282.99999,21.982107 282.99999,22 0,22 z" Fill="#FF5FEDC2" Margin="125,0,0,5" Stretch="Fill" UseLayoutRounding="False" Opacity="0.55" Grid.ColumnSpan="6" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
<SkewTransform AngleY="0" AngleX="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
<Path.Effect>
<BlurEffect Radius="39"/>
</Path.Effect>
</Path>
<Button Content="Red" Grid.Column="1" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=activeArea}" PropertyName="Background">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="Red"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="Blue" Grid.Column="2" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=activeArea}" PropertyName="Background">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="#FF0C00FF"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="Green" Grid.Column="3" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=activeArea}" PropertyName="Background">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="Lime"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="Purple" Grid.Column="4" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=activeArea}" PropertyName="Background">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="#FFE100FF"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="Yellow" Grid.Column="5" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=activeArea}" PropertyName="Background">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="#FFFFF900"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
<Path x:Name="smile" Fill="#FF393939" Data="m 319.96413 387.5438 c -27.11337 -4.44629 -42.6132 -18.08724 -46.44081 -40.87119 -0.59089 -3.51732 -0.46743 -3.80087 1.52401 -3.5 1.56315 0.23616 2.58635 1.58132 3.67194 4.82739 6.05224 18.09697 27.57654 28.54291 58.28073 28.28416 25.28423 -0.21307 44.38169 -9.84069 53.14755 -26.79332 2.30065 -4.44932 3.93641 -6.4846 5.21374 -6.48714 1.60761 -0.003 1.76691 0.50739 1.16876 3.7463 -1.9977 10.81735 -12.45722 24.98033 -23.95164 32.43234 -12.84471 8.32742 -33.14704 11.55387 -52.61428 8.36146 z m 58.65075 -73.6321 c -9.00059 -7.07986 -6.45702 -20.78146 4.46537 -24.05389 13.85524 -4.15113 23.02017 15.7667 10.98635 23.87629 -4.47246 3.01399 -11.73965 3.09752 -15.45172 0.1776 z m 3.7125 -12.05559 c 0.78886 -3.01661 -2.24111 -5.61329 -5.09111 -4.36307 -1.27852 0.56086 -2.04014 1.57567 -1.75 2.33179 0.28255 0.73631 0.51373 1.90846 0.51373 2.60478 0 0.71154 1.27083 1.30216 2.90159 1.34853 2.10334 0.0598 3.0458 -0.46897 3.42579 -1.92203 z m -112.05769 10.6613 c -9.46007 -4.11255 -9.55303 -19.21681 -0.1482 -24.08024 4.63157 -2.39507 11.21237 -1.44955 14.97047 2.15093 11.16975 10.7013 -0.59878 28.11266 -14.82227 21.92931 z M 271.75 299.13569 C 273.32053 296.16512 273.31175 296 271.58333 296 c -0.77916 0 -1.5871 -0.51131 -1.79541 -1.13624 -0.78238 -2.34714 -4.63584 1.32851 -4.26881 4.07183 0.41371 3.09222 0.0483 2.73848 2.73089 2.64381 1.29218 -0.0456 2.78212 -1.08588 3.5 -2.44371 z" HorizontalAlignment="Left" Margin="70,80,0,20" UseLayoutRounding="False" Stretch="Fill" Width="50" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
<Grid x:Name="activeArea" Margin="250,200" DataContext="{Binding SelectedItem, ElementName=starList, Mode=OneWay}">
<Grid.Resources>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding}" Value="{x:Null}">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.Background>
<SolidColorBrush x:Name="activeBG" Color="{StaticResource PlainGray}" />
</Grid.Background>
<Grid.Effect>
<DropShadowEffect Opacity="0.255"/>
</Grid.Effect>
<TextBlock Margin="0" TextWrapping="Wrap" Text="{Binding Code}" d:LayoutOverrides="Width, Height" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="911 Porscha" FontSize="64" TextAlignment="Center">
<TextBlock.Effect>
<DropShadowEffect Color="#FF999999" Opacity="0.7"/>
</TextBlock.Effect>
</TextBlock>
<StackPanel Margin="0" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" FontFamily="Kartika" FontSize="16" Text="Correct: " />
<TextBlock TextWrapping="Wrap" Text="{Binding Correct}" HorizontalAlignment="Center" FontFamily="Kartika" FontSize="16"/>
</StackPanel>
</Grid>
<Grid x:Name="bottomBar" VerticalAlignment="Bottom" Margin="0" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform Y="55"/>
</TransformGroup>
</Grid.RenderTransform>
<Path x:Name="tab" Data="M27.5,0 C42.450523,0 54.614544,11.496587 54.99102,25.816023 L54.993435,26 55,26 55,26.5 55,90 0,90 0,26.5 0,26 0.0065655573,26 0.0089813769,25.816023 C0.38545704,11.496587 12.549478,0 27.5,0 z" Fill="#FF5FB5ED" Height="81" Margin="0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="50" HorizontalAlignment="Center">
<Path.Effect>
<DropShadowEffect Direction="104" Opacity="0.38" BlurRadius="8" ShadowDepth="3"/>
</Path.Effect>
</Path>
<Path x:Name="path" Data="M219,0 C339.95035,0 438,12.536028 438,27.999996 L0,27.999996 C0,12.536028 98.049637,0 219,0 z" Fill="#FF5FB5ED" Margin="0" Stretch="Fill" UseLayoutRounding="False" Height="35" VerticalAlignment="Bottom">
<Path.Effect>
<DropShadowEffect Direction="173" Opacity="0.575"/>
</Path.Effect>
</Path>
<ec:PathListBox x:Name="starList" HorizontalAlignment="Center" Height="0" Margin="0,0,0,-361" VerticalAlignment="Bottom" Width="0" ItemsSource="{Binding Numbers}" >
<ec:PathListBox.LayoutPaths>
<ec:LayoutPath SourceElement="{Binding ElementName=path}" Span="0.45" Start="0.8" Capacity="10"/>
</ec:PathListBox.LayoutPaths>
<ec:PathListBox.ItemTemplate>
<DataTemplate>
<Grid>
<ed:RegularPolygon x:Name="regularPolygon" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="35" Width="35"
PointCount="5" Stretch="Fill" InnerRadius="0.47211">
<ed:RegularPolygon.Style>
<Style TargetType="ed:RegularPolygon">
<Style.Triggers>
<DataTrigger Binding="{Binding Correct}" Value="True">
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFD9E082" Offset="0" />
<GradientStop Color="#FFDDE939" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Correct}" Value="False">
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE91616" Offset="0" />
<GradientStop Color="#FFFF7A7A" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ed:RegularPolygon.Style>
</ed:RegularPolygon>
<TextBlock Text="{Binding Code, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ec:PathListBox.ItemTemplate>
</ec:PathListBox>
</Grid>
<Button x:Name="resetButton" Content="Reset" HorizontalAlignment="Right" Margin="0,0,8,0" d:LayoutOverrides="Height" VerticalAlignment="Center" Width="50" Style="{DynamicResource MenuButtonStyle}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=starList}" PropertyName="SelectedIndex" Value="-1"/>
<ei:ChangePropertyAction TargetObject="{Binding ElementName=activeArea}" PropertyName="Background">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="{StaticResource PlainGray}"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
<ei:ChangePropertyAction TargetObject="{Binding ElementName=buzList}" PropertyName="SelectedIndex"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Grid x:Name="LeftSide" Background="#B5501515" DataContext="{Binding Words}" HorizontalAlignment="Left" Margin="8,90,0,90" Width="180" d:LayoutOverrides="Height" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Path x:Name="Arc" HorizontalAlignment="Left" Stretch="Fill" UseLayoutRounding="False" Width="100" Margin="10,0,0,0" Data="M2.2620239,0.34557813 C51.942673,8.6333851 90,55.486155 90,112.04357 90,168.60098 51.942673,215.45375 2.2620239,223.74155"/>
<ec:PathListBox x:Name="buzList" HorizontalAlignment="Left" Height="0" Margin="0,0,0,7" VerticalAlignment="Bottom" Width="0" ItemTemplate="{DynamicResource WordsItemTemplate}" ItemsSource="{Binding Mode=OneWay}" IsSynchronizedWithCurrentItem="True" d:LayoutOverrides="VerticalAlignment">
<ec:PathListBox.LayoutPaths>
<ec:LayoutPath SourceElement="{Binding ElementName=Arc}" Capacity="8" Padding="0" Span="0.6" Start="0.2"/>
</ec:PathListBox.LayoutPaths>
</ec:PathListBox>
<StackPanel Orientation="Horizontal" Margin="0" Grid.Row="1" d:LayoutOverrides="Height">
<Image Margin="5,5,0,5" Source="{Binding Icon, Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Left" Height="75"/>
<TextBlock TextWrapping="Wrap" Text="{Binding EmployeeCount, Mode=OneWay}" VerticalAlignment="Center" FontSize="24" FontWeight="Bold" Foreground="#FF250303" Margin="8,0,0,0"/>
</StackPanel>
</Grid>
<Path Data="M-302,219" HorizontalAlignment="Left" Height="0" Margin="-302,219,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="0"/>
</Grid>
</Window>