ifsrenderer-linux / WpfDisplay / Views / Node.xaml

<UserControl x:Class="WpfDisplay.Views.Node"
             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:WpfDisplay.Views"
             xmlns:vm="clr-namespace:WpfDisplay.ViewModels"
             mc:Ignorable="d" 
             d:DesignHeight="150" d:DesignWidth="150"
             x:Name="root"
             d:DataContext="{d:DesignInstance Type=vm:IteratorViewModel}"
             Width="{Binding NodeSize}" Height="{Binding NodeSize}"
             Focusable="False"
             >
    <UserControl.Resources>
        <BooleanToVisibilityConverter x:Key="visibilityConverter"/>
    </UserControl.Resources>
    <UserControl.RenderTransform>
        <TranslateTransform X="{Binding RenderTranslateValue}" Y="{Binding RenderTranslateValue}"/>
    </UserControl.RenderTransform>
    <Grid x:Name="grid">
        <Ellipse x:Name="ellipseBody"
                 Stretch="UniformToFill" Cursor="Hand"
                 Stroke="{DynamicResource borderBrush}"
                 MouseDown="ellipseBody_MouseDown" Focusable="True" GotKeyboardFocus="UserControl_GotFocus">
            <Ellipse.Resources>
                <SolidColorBrush x:Key="borderBrush" Color="{Binding ColorRGB}"/>
                <Style TargetType="Ellipse">
                    <Style.Triggers>
                        <!--Grow border on node hover-->
                        <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=grid}" Value="True">
                            <Setter Property="StrokeThickness" Value="8"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=grid}" Value="False">
                            <Setter Property="StrokeThickness" Value="4"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsSelected}" Value="True">
                            <Setter Property="StrokeThickness" Value="8"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=IsMouseDown, ElementName=root}" Value="True">
                            <Setter Property="StrokeThickness" Value="4"/>
                        </DataTrigger>
                        <!--Shadow effect when selected-->
                        <DataTrigger Binding="{Binding IsSelected}" Value="True">
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <DropShadowEffect ShadowDepth="5" Direction="-90" BlurRadius="20"/>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Resources>
            <Ellipse.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="{Binding OpacityColor, UpdateSourceTrigger=PropertyChanged}" Offset="0.98"/>
                    <GradientStop Color="LightGray" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Label IsHitTestVisible="False"
            Content="{Binding NodeLabel, UpdateSourceTrigger=PropertyChanged}" 
            HorizontalAlignment="Center" VerticalAlignment="Center" Cursor="Hand"
            Foreground="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Grid d:Visibility="Visible">
            <Grid.Resources>
                <Style TargetType="Grid">
                    <Style.Triggers>
                        <!--Show action buttons on hover-->
                        <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=grid}" Value="True">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=grid}" Value="False">
                            <Setter Property="Visibility" Value="{Binding IsSelected, Converter={StaticResource visibilityConverter}}"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Resources>
            <Label
                Width="30" Height="25" Padding="0"
                VerticalAlignment="Top" HorizontalAlignment="Center"
                HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                FontSize="18" Foreground="LightGray" Cursor="SizeAll"
                MouseMove="dragHandle_MouseMove" MouseDown="Label_MouseDown">
                ══
                <Label.Effect>
                    <DropShadowEffect Color="Black" ShadowDepth="1.0" BlurRadius="0.5"/>
                </Label.Effect>
            </Label>
            <Button
                Command="{Binding FlipOpacityCommand}"
                Width="30" Height="30" FontSize="18"
                VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5"
                FontWeight="Bold" ToolTip="Show/Hide (Ctrl+O)"
                IsTabStop="False"
                Style="{DynamicResource MaterialDesignFloatingActionButton}">
                👁️
            </Button>
            <Button
                Command="{Binding FlipWeightCommand}"
                Width="30" Height="30" FontSize="18"
                VerticalAlignment="Top" HorizontalAlignment="Right" Margin="5"
                ToolTip="Enable/Disable (Ctrl+W)"
                IsTabStop="False"
                Style="{DynamicResource MaterialDesignFloatingActionButton}">
                ⚖
            </Button>
            <Button
                Command="{Binding DuplicateCommand}" CommandParameter="{Binding}"
                Width="30" Height="30" FontSize="18"
                VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5"
                FontWeight="Bold" ToolTip="Duplicate (Ctrl+D)"
                IsTabStop="False"
                Style="{DynamicResource MaterialDesignFloatingActionButton}">
                🗎🗎
            </Button>
            <Button
                Command="{Binding SplitCommand}" CommandParameter="{Binding}"
                Width="30" Height="30" FontSize="14"
                VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"
                FontWeight="Bold" ToolTip="Split (Ctrl+Shift+D)"
                IsTabStop="False"
                Style="{DynamicResource MaterialDesignFloatingActionButton}">
                🗎|🗎
            </Button>
            <!--<Button
                Command="{Binding RemoveCommand}" CommandParameter="{Binding}"
                Width="30" Height="30" FontSize="18"
                VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"
                ToolTip="Remove (Delete)"
                Style="{DynamicResource MaterialDesignFloatingActionButton}">
                🗑️
            </Button>-->
            <Button
                Command="{Binding ConnectSelfCommand}"
                Width="35" Height="35" FontSize="22"
                VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="-15"
                ToolTip="Connect self"
                IsTabStop="False"
                Style="{DynamicResource MaterialDesignFloatingActionButton}">
                Ꝍ
            </Button>
        </Grid>
    </Grid>
</UserControl>