<!--
A faithful translation of the Tablet PC SDK's AutoClaims sample, from
Windows Forms to WinFX.
This sample demonstrates:
- InkCanvas
- multiple transparent layers of ink, over an Image resource
- databinding for Strokes
- DefaultDrawingAttributes defined in static resources
- animated Opacity and ZIndex properties for smooth transitions among layers
- TextBox.InputScope
- defines a pattern to coerce handwriting in the Year (YYYY) field
- Scrolling and resizing
- relative layout techniques
- ScrollViewer around the Image and InkCanvas elements
...all in 100% pure XAML!
-->
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ink="clr-namespace:System.Windows.Ink;assembly=PresentationCore"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
x:Class="AutoClaimsFX.Window1"
Title="AutoClaimsFX"
Width="560" Height="730">
<Window.Resources>
<!-- Simple data island to provide backing source for databinding -->
<XmlDataProvider x:Key="FormData" XPath="/FormData">
<x:XData>
<FormData xmlns="">
<Customer Name="" PolicyNumber="" />
<Auto Year="" Make="" Model="" />
<DamageMarkup>
<Body />
<Windows />
<Tires />
<Lights />
</DamageMarkup>
</FormData>
</x:XData>
</XmlDataProvider>
<!-- Palette of DrawingAttributes for different damage markup layers -->
<ink:DrawingAttributes x:Key="BodyDA" Color="Red" Width="3" Height="3" />
<ink:DrawingAttributes x:Key="WindowsDA" Color="Violet" Width="3" Height="3" />
<ink:DrawingAttributes x:Key="TiresDA" Color="LightGreen" Width="3" Height="3" />
<ink:DrawingAttributes x:Key="LightsDA" Color="Aqua" Width="3" Height="3" />
<!-- Converter to bind togglebutton state to element visiblity -->
<BooleanToVisibilityConverter x:Key="B2VC" />
</Window.Resources>
<!-- Establish our data island as the default binding source -->
<Window.DataContext>
<StaticResource ResourceKey="FormData" />
</Window.DataContext>
<DockPanel>
<DockPanel.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Beige" />
<GradientStop Offset="1" Color="LightGray" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</DockPanel.Background>
<!-- Header and graphics -->
<TextBlock DockPanel.Dock="Top" Margin="15,5,0,0" FontSize="28" FontWeight="Bold">Auto Claim</TextBlock>
<DockPanel DockPanel.Dock="Top">
<StackPanel Orientation="Vertical">
<Path
Data="M 0,0 L 0,24 40,24 40,6 14,24 6,14 10,11 15,17 40,0 Z"
Stroke="Black" StrokeThickness="1.5" Margin="40,5,0,5" />
<Path
Data="M 0,0 L 0,24 40,24 40,6 14,24 6,14 10,11 15,17 40,0 Z"
Stroke="Black" StrokeThickness="1.5" Margin="40,5,0,5" />
</StackPanel>
<TextBlock Margin="30,5,0,0" TextWrapping="Wrap" FontSize="16">
Enter the required information for the policy applicable to the auto claim you are submitting.
Enter the vehicle exactly as it appears on the policy or insurance card.
</TextBlock>
</DockPanel>
<Rectangle DockPanel.Dock="Top" Fill="DarkGray" Height="2" Margin="10" />
<!-- Policy Number and Name -->
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
TextAlignment="Right" Background="LightGray" Margin="10,0,0,0" Padding="20,10,10,10" FontSize="20" FontWeight="Bold">
Policy Number:
</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1"
TextAlignment="Right" Background="LightGray" Margin="10,0,0,0" Padding="20,10,10,10" FontSize="20" FontWeight="Bold">
Insured Name:
</TextBlock>
<TextBox Grid.Column="1" Grid.Row="0" Margin="10" Text="{Binding XPath=Customer/@PolicyNumber}" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="10" Text="{Binding XPath=Customer/@Name}" />
</Grid>
<Rectangle DockPanel.Dock="Top" Fill="DarkGray" Height="2" Margin="10" />
<!-- Year, Make, Model -->
<TextBlock DockPanel.Dock="Top" Margin="10" FontSize="16" FontWeight="Bold">Enter the involved vehicle listed on the policy:</TextBlock>
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
TextAlignment="Right" Background="LightGray" Margin="10,0,0,0" Padding="20,10,10,10" FontSize="20" FontWeight="Bold">
Year (YYYY):
</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1"
TextAlignment="Right" Background="LightGray" Margin="10,0,0,0" Padding="20,10,10,10" FontSize="20" FontWeight="Bold">
Make:
</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="2"
TextAlignment="Right" Background="LightGray" Margin="10,0,0,0" Padding="20,10,10,10" FontSize="20" FontWeight="Bold">
Model:
</TextBlock>
<TextBox Grid.Column="1" Grid.Row="0" Margin="10" Text="{Binding XPath=Auto/@Year}">
<TextBox.InputScope>
<InputScope>
<InputScope.Names>
<InputScopeName>RegularExpression</InputScopeName>
</InputScope.Names>
<InputScope.RegularExpression>((19|20)(0|1|2|3|4|5|6|7|8|9)(0|1|2|3|4|5|6|7|8|9))</InputScope.RegularExpression>
</InputScope>
</TextBox.InputScope>
</TextBox>
<TextBox Grid.Column="1" Grid.Row="1" Margin="10" Text="{Binding XPath=Auto/@Make}" />
<TextBox Grid.Column="1" Grid.Row="2" Margin="10" Text="{Binding XPath=Auto/@Model}" />
</Grid>
<Rectangle DockPanel.Dock="Top" Fill="DarkGray" Height="2" Margin="10" />
<!-- The InkCanvas and Image elements, and controlling ToggleButtons -->
<TextBlock DockPanel.Dock="Top" Margin="10" FontSize="16" FontWeight="Bold">Description of vehicle damage:</TextBlock>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="Black" BorderThickness="1" Margin="15,5,5,20">
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="FontSize" Value="14" />
<Setter Property="Margin" Value="7,7,7,0" />
</Style>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="FontSize" Value="14" />
<Setter Property="Margin" Value="7,12,7,0" />
</Style>
</StackPanel.Resources>
<RadioButton Name="rbBody" GroupName="rbg1" Content="Body" IsChecked="True">
<RadioButton.Triggers>
<EventTrigger RoutedEvent="RadioButton.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Int32Animation To="1" Duration="0:0:1"
Storyboard.TargetName="icBody"
Storyboard.TargetProperty="(Panel.ZIndex)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="RadioButton.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Int32Animation To="0" Duration="0:0:1"
Storyboard.TargetName="icBody"
Storyboard.TargetProperty="(Panel.ZIndex)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</RadioButton.Triggers>
</RadioButton>
<RadioButton Name="rbWindows" GroupName="rbg1" Content="Windows">
<RadioButton.Triggers>
<EventTrigger RoutedEvent="RadioButton.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Int32Animation To="1" Duration="0:0:1"
Storyboard.TargetName="icWindows"
Storyboard.TargetProperty="(Panel.ZIndex)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="RadioButton.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Int32Animation To="0" Duration="0:0:1"
Storyboard.TargetName="icWindows"
Storyboard.TargetProperty="(Panel.ZIndex)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</RadioButton.Triggers>
</RadioButton>
<RadioButton Name="rbTires" GroupName="rbg1" Content="Tires">
<RadioButton.Triggers>
<EventTrigger RoutedEvent="RadioButton.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Int32Animation To="1" Duration="0:0:1"
Storyboard.TargetName="icTires"
Storyboard.TargetProperty="(Panel.ZIndex)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="RadioButton.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Int32Animation To="0" Duration="0:0:1"
Storyboard.TargetName="icTires"
Storyboard.TargetProperty="(Panel.ZIndex)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</RadioButton.Triggers>
</RadioButton>
<RadioButton Name="rbLights" GroupName="rbg1" Content="Lights">
<RadioButton.Triggers>
<EventTrigger RoutedEvent="RadioButton.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Int32Animation To="1" Duration="0:0:1"
Storyboard.TargetName="icLights"
Storyboard.TargetProperty="(Panel.ZIndex)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="RadioButton.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Int32Animation To="0" Duration="0:0:1"
Storyboard.TargetName="icLights"
Storyboard.TargetProperty="(Panel.ZIndex)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</RadioButton.Triggers>
</RadioButton>
<CheckBox Name="cbBody" Content="Show Damage" IsChecked="True"
Visibility="{Binding ElementName=rbBody,Path=IsChecked,Converter={StaticResource B2VC}}">
<CheckBox.Triggers>
<EventTrigger RoutedEvent="CheckBox.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0.0" Duration="0:0:1"
Storyboard.TargetName="icBody"
Storyboard.TargetProperty="(InkCanvas.Opacity)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="CheckBox.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.0" Duration="0:0:1"
Storyboard.TargetName="icBody"
Storyboard.TargetProperty="(InkCanvas.Opacity)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</CheckBox.Triggers>
</CheckBox>
<CheckBox Name="cbWindows" Content="Show Damage" IsChecked="True"
Visibility="{Binding ElementName=rbWindows,Path=IsChecked,Converter={StaticResource B2VC}}">
<CheckBox.Triggers>
<EventTrigger RoutedEvent="CheckBox.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0.0" Duration="0:0:1"
Storyboard.TargetName="icWindows"
Storyboard.TargetProperty="(InkCanvas.Opacity)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="CheckBox.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.0" Duration="0:0:1"
Storyboard.TargetName="icWindows"
Storyboard.TargetProperty="(InkCanvas.Opacity)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</CheckBox.Triggers>
</CheckBox>
<CheckBox Name="cbTires" Content="Show Damage" IsChecked="True"
Visibility="{Binding ElementName=rbTires,Path=IsChecked,Converter={StaticResource B2VC}}">
<CheckBox.Triggers>
<EventTrigger RoutedEvent="CheckBox.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0.0" Duration="0:0:1"
Storyboard.TargetName="icTires"
Storyboard.TargetProperty="(InkCanvas.Opacity)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="CheckBox.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.0" Duration="0:0:1"
Storyboard.TargetName="icTires"
Storyboard.TargetProperty="(InkCanvas.Opacity)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</CheckBox.Triggers>
</CheckBox>
<CheckBox Name="cbLights" Content="Show Damage" IsChecked="True"
Visibility="{Binding ElementName=rbLights,Path=IsChecked,Converter={StaticResource B2VC}}">
<CheckBox.Triggers>
<EventTrigger RoutedEvent="CheckBox.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0.0" Duration="0:0:1"
Storyboard.TargetName="icLights"
Storyboard.TargetProperty="(InkCanvas.Opacity)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="CheckBox.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.0" Duration="0:0:1"
Storyboard.TargetName="icLights"
Storyboard.TargetProperty="(InkCanvas.Opacity)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</CheckBox.Triggers>
</CheckBox>
</StackPanel>
</Border>
<!-- Four InkCanvas layers over an Image element... each InkCanvas has Opacity and
ZIndex determined by checkbox and radio buttons, above -->
<Border Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="5,5,20,20">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid Background="White">
<Image Source="Car.jpg" LayoutTransform="0.5,0,0,0.5,0,0"
Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" />
<InkCanvas Name="icLights" Background="Transparent"
DefaultDrawingAttributes="{StaticResource LightsDA}"
Strokes="{Binding XPath=DamageMarkup/Lights}"
IsEnabled="{Binding ElementName=cbLights,Path=IsChecked}">
</InkCanvas>
<InkCanvas Name="icTires" Background="Transparent"
DefaultDrawingAttributes="{StaticResource TiresDA}"
Strokes="{Binding XPath=DamageMarkup/Tires}"
IsEnabled="{Binding ElementName=cbTires,Path=IsChecked}">
</InkCanvas>
<InkCanvas Name="icWindows" Background="Transparent"
DefaultDrawingAttributes="{StaticResource WindowsDA}"
Strokes="{Binding XPath=DamageMarkup/Windows}"
IsEnabled="{Binding ElementName=cbWindows,Path=IsChecked}">
</InkCanvas>
<InkCanvas Name="icBody" Background="Transparent"
DefaultDrawingAttributes="{StaticResource BodyDA}"
Strokes="{Binding XPath=DamageMarkup/Body}"
IsEnabled="{Binding ElementName=cbBody,Path=IsChecked}">
</InkCanvas>
</Grid>
</ScrollViewer>
</Border>
</Grid>
</DockPanel>
</Window>
