Files
APIVisualExecutor/Examples/Nodify.Shapes/Canvas/CanvasView.xaml
Ankitkumar Satapara 21aaef6776 Add project files.
2026-04-17 22:31:58 +05:30

711 lines
40 KiB
XML

<UserControl x:Class="Nodify.Shapes.Canvas.CanvasView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Nodify.Shapes.Canvas"
xmlns:nodify="https://miroiu.github.io/nodify"
xmlns:shared="clr-namespace:Nodify;assembly=Nodify.Shared"
xmlns:controls="clr-namespace:Nodify.Shapes.Controls"
xmlns:o="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
mc:Ignorable="d"
Background="#0a172a"
Foreground="white"
d:DataContext="{d:DesignInstance Type=local:CanvasViewModel, IsDesignTimeCreatable=True}"
d:DesignHeight="450"
d:DesignWidth="800">
<Grid>
<Grid.Resources>
<shared:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<shared:InverseBooleanConverter x:Key="InverseBooleanConverter" />
<shared:ColorToSolidColorBrushConverter x:Key="ColorToSolidColorBrushConverter" />
<VisualBrush x:Key="GridDrawingBrush"
TileMode="Tile"
Viewport="0 0 30 30"
ViewportUnits="Absolute"
Viewbox="0 0 30 30"
ViewboxUnits="Absolute"
o:Freeze="True"
Transform="{Binding ViewportTransform, ElementName=Editor}">
<VisualBrush.Visual>
<Rectangle Width="1"
Height="1"
Fill="White" />
</VisualBrush.Visual>
</VisualBrush>
</Grid.Resources>
<nodify:NodifyEditor ItemsSource="{Binding Shapes}"
SelectedItems="{Binding SelectedShapes}"
Connections="{Binding Connections}"
Decorators="{Binding Decorators}"
Background="{StaticResource GridDrawingBrush}"
ConnectionCompletedCommand="{Binding CreateConnectionCommand}"
ItemsDragStartedCommand="{Binding MoveShapesStartedCommand}"
ItemsDragCompletedCommand="{Binding MoveShapesCompletedCommand}"
RemoveConnectionCommand="{Binding RemoveConnectionCommand}"
SelectionChanged="Editor_SelectionChanged"
ItemsMoved="Editor_ItemsMoved"
MouseDown="Editor_MouseDown"
MouseMove="Editor_MouseMove"
MouseUp="Editor_MouseUp"
GridCellSize="5"
x:Name="Editor">
<nodify:NodifyEditor.Style>
<Style TargetType="{x:Type nodify:NodifyEditor}"
BasedOn="{StaticResource {x:Type nodify:NodifyEditor}}">
<Setter Property="Cursor"
Value="Cross" />
<Style.Triggers>
<DataTrigger Binding="{Binding CanvasToolbar.SelectedTool}"
Value="{x:Static local:CanvasTool.None}">
<Setter Property="Cursor"
Value="Arrow" />
</DataTrigger>
</Style.Triggers>
</Style>
</nodify:NodifyEditor.Style>
<nodify:NodifyEditor.Resources>
<DataTemplate DataType="{x:Type local:EllipseViewModel}">
<Ellipse Stretch="Fill"
Focusable="False"
Fill="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}"
Stroke="{Binding BorderColor, Converter={StaticResource ColorToSolidColorBrushConverter}}"
StrokeThickness="2"
Opacity="0.8" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:RectangleViewModel}">
<Rectangle Stretch="Fill"
Focusable="False"
Fill="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}"
Stroke="{Binding BorderColor, Converter={StaticResource ColorToSolidColorBrushConverter}}"
StrokeThickness="2"
Opacity="0.8" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:TriangleViewModel}">
<Polygon Points="0,100 50,0 100,100"
Focusable="False"
Stretch="Fill"
Fill="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}"
Stroke="{Binding BorderColor, Converter={StaticResource ColorToSolidColorBrushConverter}}"
StrokeThickness="2"
Opacity="0.8" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:ShapeToolbarViewModel}">
<Canvas Visibility="{Binding Shape, Converter={StaticResource BooleanToVisibilityConverter}}">
<shared:Swatches SelectedColor="{Binding Shape.Color}"
Colors="{x:Static local:ShapeViewModel.Colors}"
IsEnabled="{Binding DataContext.CanvasToolbar.Locked, ElementName=Editor, Converter={StaticResource InverseBooleanConverter}}"
Canvas.Top="-70"
Panel.ZIndex="1">
<shared:Swatches.Effect>
<DropShadowEffect ShadowDepth="1" />
</shared:Swatches.Effect>
</shared:Swatches>
</Canvas>
</DataTemplate>
<DataTemplate DataType="{x:Type local:UserCursorViewModel}">
<StackPanel IsHitTestVisible="False">
<Viewbox Width="24"
Height="24"
Margin="-10 0 0 5"
Stretch="Fill"
HorizontalAlignment="Left">
<Path Fill="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}"
Stroke="White"
StrokeLineJoin="Round"
StrokeStartLineCap="Round"
StrokeEndLineCap="Round"
Data="M.256.255a.874.874 0 0 0-.18.974l4.753 17.114a.875.875 0 0 0 1.603-.012L10 10l8.334-3.57a.875.875 0 0 0 .01-1.601L1.23.075a.874.874 0 0 0-.974.18Z" />
</Viewbox>
<Border CornerRadius="3"
Background="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}, ConverterParameter=0.7}"
Padding="6 2">
<TextBlock Text="{Binding Name}" />
</Border>
</StackPanel>
</DataTemplate>
<Style TargetType="{x:Type nodify:PendingConnection}"
BasedOn="{StaticResource {x:Type nodify:PendingConnection}}">
<Setter Property="Stroke">
<Setter.Value>
<SolidColorBrush Color="White"
Opacity="0.7" />
</Setter.Value>
</Setter>
</Style>
</nodify:NodifyEditor.Resources>
<nodify:NodifyEditor.ConnectionTemplate>
<DataTemplate DataType="{x:Type local:ConnectionViewModel}">
<nodify:StepConnection Source="{Binding Source.Anchor}"
Target="{Binding Target.Anchor}"
SourcePosition="{Binding Source.Position}"
TargetPosition="{Binding Target.Position}"
Cursor="Hand"
IsSelectable="True"
Fill="Transparent"
FocusVisualPadding="2"
StrokeThickness="3">
<nodify:StepConnection.Stroke>
<SolidColorBrush Color="White"
Opacity="0.7" />
</nodify:StepConnection.Stroke>
<nodify:StepConnection.Style>
<Style TargetType="{x:Type nodify:StepConnection}">
<Setter Property="OutlineBrush"
Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="OutlineBrush">
<Setter.Value>
<SolidColorBrush Color="White"
Opacity="0.15" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="OutlineBrush">
<Setter.Value>
<SolidColorBrush Color="DodgerBlue"
Opacity="0.25" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</nodify:StepConnection.Style>
</nodify:StepConnection>
</DataTemplate>
</nodify:NodifyEditor.ConnectionTemplate>
<nodify:NodifyEditor.DecoratorContainerStyle>
<Style TargetType="{x:Type nodify:DecoratorContainer}"
BasedOn="{StaticResource {x:Type nodify:DecoratorContainer}}">
<Setter Property="Location"
Value="{Binding Location}" />
</Style>
</nodify:NodifyEditor.DecoratorContainerStyle>
<nodify:NodifyEditor.ItemContainerStyle>
<Style TargetType="{x:Type nodify:ItemContainer}"
BasedOn="{StaticResource {x:Type nodify:ItemContainer}}">
<Style.Resources>
<Style TargetType="{x:Type nodify:Connector}"
BasedOn="{StaticResource {x:Type nodify:Connector}}">
<Setter Property="BorderBrush"
Value="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType=nodify:ItemContainer}}" />
<Setter Property="Background"
Value="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType=nodify:ItemContainer}}" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="IsConnected"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="Transparent">
<Ellipse x:Name="PART_Connector"
Width="14"
Height="14"
Stroke="{TemplateBinding BorderBrush}"
Fill="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type shared:Resizer}"
BasedOn="{StaticResource {x:Type shared:Resizer}}">
<Setter Property="Background"
Value="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType=nodify:ItemContainer}}" />
<Setter Property="IsEnabled"
Value="{Binding DataContext.CanvasToolbar.Locked, ElementName=Editor, Converter={StaticResource InverseBooleanConverter}}" />
</Style>
<!--For some reason, the designer doesn't like having these bindings on the element itself but in a style-->
<Style TargetType="{x:Type controls:ResizableContainer}"
BasedOn="{StaticResource {x:Type shared:ResizablePanel}}">
<Setter Property="BorderBrush"
Value="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType=nodify:ItemContainer}}" />
<Setter Property="Padding"
Value="3" />
<Setter Property="ResizeStartedCommand"
Value="{Binding DataContext.ResizeShapeStartedCommand, ElementName=Editor}" />
<Setter Property="ResizeCompletedCommand"
Value="{Binding DataContext.ResizeShapeCompletedCommand, ElementName=Editor}" />
</Style>
</Style.Resources>
<Setter Property="Location"
Value="{Binding Location}" />
<Setter Property="SelectedBrush"
Value="{Binding BorderColor, Converter={StaticResource ColorToSolidColorBrushConverter}}" />
<Setter Property="SelectedBorderThickness"
Value="1" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type nodify:ItemContainer}">
<controls:ResizableContainer Height="{Binding Height, Mode=TwoWay}"
Width="{Binding Width, Mode=TwoWay}"
Directions="Corners"
GridCellSize="5"
Focusable="False">
<Grid>
<ContentPresenter Cursor="Hand" />
<shared:EditableTextBlock Text="{Binding Text}"
IsEnabled="{Binding DataContext.CanvasToolbar.Locked, ElementName=Editor, Converter={StaticResource InverseBooleanConverter}}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
FontSize="16"
ToolTip="Double click to edit" />
<DockPanel LastChildFill="False">
<nodify:Connector DataContext="{Binding LeftConnector}"
Anchor="{Binding Anchor, Mode=OneWayToSource}"
DockPanel.Dock="Left"
HorizontalContentAlignment="Left"
Margin="-11 0 0 0"
Visibility="Hidden"
Height="Auto"
Width="25"
x:Name="LeftConnector" />
<nodify:Connector DataContext="{Binding RightConnector}"
Anchor="{Binding Anchor, Mode=OneWayToSource}"
DockPanel.Dock="Right"
HorizontalContentAlignment="Right"
Margin="0 0 -11 0"
Visibility="Hidden"
Height="Auto"
Width="25"
x:Name="RightConnector" />
<nodify:Connector DataContext="{Binding TopConnector}"
Anchor="{Binding Anchor, Mode=OneWayToSource}"
DockPanel.Dock="Top"
VerticalContentAlignment="Top"
Margin="0 -11 0 0"
Visibility="Hidden"
Width="Auto"
Height="25"
x:Name="TopConnector" />
<nodify:Connector DataContext="{Binding BottomConnector}"
Anchor="{Binding Anchor, Mode=OneWayToSource}"
DockPanel.Dock="Bottom"
VerticalContentAlignment="Bottom"
Margin="0 0 0 -11"
Visibility="Hidden"
Width="Auto"
Height="25"
x:Name="BottomConnector" />
</DockPanel>
</Grid>
</controls:ResizableContainer>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected"
Value="True" />
<Condition Property="IsPreviewingSelection"
Value="{x:Null}" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Visibility"
TargetName="LeftConnector"
Value="Visible" />
<Setter Property="Visibility"
TargetName="RightConnector"
Value="Visible" />
<Setter Property="Visibility"
TargetName="TopConnector"
Value="Visible" />
<Setter Property="Visibility"
TargetName="BottomConnector"
Value="Visible" />
</MultiTrigger.Setters>
</MultiTrigger>
<Trigger Property="IsPreviewingSelection"
Value="True">
<Setter Property="Visibility"
TargetName="LeftConnector"
Value="Visible" />
<Setter Property="Visibility"
TargetName="RightConnector"
Value="Visible" />
<Setter Property="Visibility"
TargetName="TopConnector"
Value="Visible" />
<Setter Property="Visibility"
TargetName="BottomConnector"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Panel.ZIndex"
Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</nodify:NodifyEditor.ItemContainerStyle>
</nodify:NodifyEditor>
<!--MINIMAP-->
<shared:ResizablePanel Directions="BottomLeft"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Width="300"
Height="200"
MinWidth="250"
MinHeight="150"
BorderBrush="{x:Null}"
Focusable="False"
Margin="20">
<shared:ResizablePanel.Resources>
<Style TargetType="{x:Type shared:Resizer}">
<Setter Property="Cursor"
Value="SizeNESW" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type shared:Resizer}">
<Grid Margin="-3 -6 -6 -3"
Background="Transparent">
<Rectangle Height="12"
Width="3"
Fill="#d2d4d7"
HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
<Rectangle Height="3"
Width="12"
Fill="#d2d4d7"
VerticalAlignment="Bottom"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</shared:ResizablePanel.Resources>
<Border CornerRadius="3"
BorderBrush="#1e293b"
BorderThickness="3">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" />
</Border.Effect>
<nodify:Minimap ItemsSource="{Binding ItemsSource, ElementName=Editor}"
ViewportLocation="{Binding ViewportLocation, ElementName=Editor}"
ViewportSize="{Binding ViewportSize, ElementName=Editor}"
ResizeToViewport="True"
Zoom="Minimap_Zoom">
<nodify:Minimap.Resources>
<DataTemplate DataType="{x:Type local:EllipseViewModel}">
<Ellipse Stretch="Fill"
Fill="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}"
Stroke="{Binding BorderColor, Converter={StaticResource ColorToSolidColorBrushConverter}}"
StrokeThickness="2"
Opacity="0.8" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:RectangleViewModel}">
<Rectangle Stretch="Fill"
Fill="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}"
Stroke="{Binding BorderColor, Converter={StaticResource ColorToSolidColorBrushConverter}}"
StrokeThickness="2"
Opacity="0.8" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:TriangleViewModel}">
<Polygon Points="0,100 50,0 100,100"
Stretch="Fill"
Fill="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}"
Stroke="{Binding BorderColor, Converter={StaticResource ColorToSolidColorBrushConverter}}"
StrokeThickness="2"
Opacity="0.8" />
</DataTemplate>
</nodify:Minimap.Resources>
<nodify:Minimap.Background>
<SolidColorBrush Color="#111a2d"
Opacity="0.5" />
</nodify:Minimap.Background>
<nodify:Minimap.ItemContainerStyle>
<Style TargetType="{x:Type nodify:MinimapItem}">
<Setter Property="Location"
Value="{Binding Location}" />
<Setter Property="Width"
Value="{Binding Width}" />
<Setter Property="Height"
Value="{Binding Height}" />
</Style>
</nodify:Minimap.ItemContainerStyle>
<nodify:Minimap.ViewportStyle>
<Style TargetType="Rectangle">
<Setter Property="StrokeThickness"
Value="3" />
<Setter Property="Fill">
<Setter.Value>
<SolidColorBrush Color="#445e87"
Opacity="0.3" />
</Setter.Value>
</Setter>
</Style>
</nodify:Minimap.ViewportStyle>
</nodify:Minimap>
</Border>
</shared:ResizablePanel>
<!--TOOLBARS-->
<Border VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Margin="0 0 0 20"
CornerRadius="3"
Background="#1e293b">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" />
</Border.Effect>
<ItemsControl Focusable="True"
KeyboardNavigation.TabNavigation="Cycle">
<ItemsControl.Resources>
<Style TargetType="Button"
BasedOn="{StaticResource IconButton}">
<Setter Property="Margin"
Value="2" />
<Setter Property="Width"
Value="32" />
<Setter Property="Height"
Value="32" />
<Setter Property="Focusable"
Value="False" />
</Style>
</ItemsControl.Resources>
<ListBox BorderThickness="0"
Background="Transparent"
ItemsSource="{x:Static local:CanvasToolbarViewModel.AvailableTools}"
SelectedValue="{Binding CanvasToolbar.SelectedTool}"
KeyboardNavigation.ControlTabNavigation="None">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Margin"
Value="2" />
<Setter Property="Padding"
Value="0" />
<Setter Property="Width"
Value="32" />
<Setter Property="Height"
Value="32" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<DataTemplate x:Key="Cursor">
<Border CornerRadius="3"
Padding="5">
<ContentPresenter ContentTemplate="{StaticResource CursorIcon}" />
</Border>
</DataTemplate>
<DataTemplate x:Key="Circle">
<Border CornerRadius="3"
Padding="5">
<ContentPresenter ContentTemplate="{StaticResource CircleIcon}" />
</Border>
</DataTemplate>
<DataTemplate x:Key="Square">
<Border CornerRadius="3"
Padding="5">
<ContentPresenter ContentTemplate="{StaticResource SquareIcon}" />
</Border>
</DataTemplate>
<DataTemplate x:Key="Triangle">
<Border CornerRadius="3"
Padding="5">
<ContentPresenter ContentTemplate="{StaticResource TriangleIcon}" />
</Border>
</DataTemplate>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl Content="{Binding}"
Focusable="False">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="ContentTemplate"
Value="{StaticResource Cursor}" />
<Style.Triggers>
<DataTrigger Binding="{Binding}"
Value="{x:Static local:CanvasTool.Ellipse}">
<Setter Property="ContentTemplate"
Value="{StaticResource Circle}" />
</DataTrigger>
<DataTrigger Binding="{Binding}"
Value="{x:Static local:CanvasTool.Rectangle}">
<Setter Property="ContentTemplate"
Value="{StaticResource Square}" />
</DataTrigger>
<DataTrigger Binding="{Binding}"
Value="{x:Static local:CanvasTool.Triangle}">
<Setter Property="ContentTemplate"
Value="{StaticResource Triangle}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<Button Command="{Binding UndoCommand}"
CommandTarget="{Binding ElementName=Editor}"
ContentTemplate="{StaticResource ArrowBackIcon}"
ToolTip="CTRL+Z"
Padding="1" />
<Button Command="{Binding RedoCommand}"
CommandTarget="{Binding ElementName=Editor}"
ContentTemplate="{StaticResource ArrowForwardIcon}"
ToolTip="CTRL+SHIFT+z"
Padding="1" />
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Border>
<Border VerticalAlignment="Bottom"
HorizontalAlignment="Left"
Margin="20 0 0 20"
CornerRadius="3"
Background="#1e293b">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" />
</Border.Effect>
<ItemsControl Focusable="True"
KeyboardNavigation.TabNavigation="Cycle"
KeyboardNavigation.DirectionalNavigation="Cycle"
KeyboardNavigation.ControlTabNavigation="None">
<ItemsControl.Resources>
<Style TargetType="Button"
BasedOn="{StaticResource IconButton}">
<Setter Property="Margin"
Value="2" />
<Setter Property="Width"
Value="32" />
<Setter Property="Height"
Value="32" />
</Style>
</ItemsControl.Resources>
<Button Command="{x:Static nodify:EditorCommands.ZoomIn}"
CommandTarget="{Binding ElementName=Editor}"
ContentTemplate="{StaticResource PlusIcon}" />
<Button Command="{x:Static nodify:EditorCommands.ZoomOut}"
CommandTarget="{Binding ElementName=Editor}"
ContentTemplate="{StaticResource MinusIcon}" />
<Button Command="{x:Static nodify:EditorCommands.FitToScreen}"
CommandTarget="{Binding ElementName=Editor}"
ContentTemplate="{StaticResource MaximizeIcon}" />
<Button Command="{Binding ToggleLockCommand}"
DataContext="{Binding CanvasToolbar}">
<Button.Style>
<Style TargetType="Button"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="ContentTemplate"
Value="{StaticResource LockOpenIcon}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Locked}"
Value="True">
<Setter Property="ContentTemplate"
Value="{StaticResource LockIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</ItemsControl>
</Border>
<Border VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Margin="0 0 20 20"
Height="38"
CornerRadius="3">
<ItemsControl ItemsSource="{Binding Cursors}"
Focusable="True"
KeyboardNavigation.TabNavigation="Cycle"
KeyboardNavigation.ControlTabNavigation="None">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:UserCursorViewModel}">
<Border CornerRadius="50"
Height="28"
Width="28"
Margin="-3"
Background="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}"
Padding="6 2">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" />
</Border.Effect>
<Button Command="{x:Static nodify:EditorCommands.BringIntoView}"
CommandParameter="{Binding Location}"
CommandTarget="{Binding ElementName=Editor}"
Style="{StaticResource IconButton}"
ToolTip="{Binding Name}"
Content="{Binding Name[0]}"
Foreground="White"
Margin="-6 -2" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</Grid>
</UserControl>