aistudio-wpf-diagram/AIStudio.Wpf.DiagramHelper/Controls/GradientStopControl.xaml

<UserControl x:Class="AIStudio.Wpf.DiagramHelper.Controls.GradientStopControl"
             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:AIStudio.Wpf.DiagramHelper.Controls"
             xmlns:Fluent="urn:fluent-ribbon"
             xmlns:converter="clr-namespace:AIStudio.Wpf.DiagramHelper.Converters"
             xmlns:helper="clr-namespace:AIStudio.Wpf.DiagramHelper.Helpers"
             xmlns:dd="https://astudio.github.io/diagram" 
             xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <ControlTemplate x:Key="RibbonDropDownButtonControlTemplate1" TargetType="{x:Type Fluent:DropDownButton}">
            <Grid>
                <Border x:Name="PART_ButtonBorder" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Height="Auto">
                    <StackPanel x:Name="stackPanel" Margin="{TemplateBinding Padding}" Width="Auto" Orientation="Vertical">
                        <ContentPresenter x:Name="iconImage" Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}" Width="Auto" SnapsToDevicePixels="True" />
                    </StackPanel>
                </Border>
                <Popup x:Name="PART_Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Margin="0,0,-4,0" VerticalAlignment="Top" Grid.ColumnSpan="2">
                    <Grid Name="DropDown" SnapsToDevicePixels="True" Margin="0" VerticalAlignment="Top">
                        <Border x:Name="PART_DropDownBorder" MinWidth="{TemplateBinding ActualWidth}" SnapsToDevicePixels="True" Background="{DynamicResource Fluent.Ribbon.Brushes.DropDown.BackgroundBrush}" BorderBrush="{DynamicResource Fluent.Ribbon.Brushes.DropDown.BorderBrush}" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                            <Grid Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                                <Border VerticalAlignment="Top" Width="Auto" Height="Auto" BorderBrush="{DynamicResource Fluent.Ribbon.Brushes.DropDown.BackgroundBrush}" BorderThickness="1" />
                                <Grid Margin="1" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <ScrollViewer x:Name="PART_ScrollViewer" Style="{DynamicResource MenuScrollViewer}" IsTabStop="False" Margin="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden">
                                        <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Local" />
                                    </ScrollViewer>
                                    <Border x:Name="resizeBorder" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="11" BorderBrush="{DynamicResource Fluent.Ribbon.Brushes.DropDown.Resize.BorderBrush}" BorderThickness="0,1,0,0" Grid.Row="1" Background="{DynamicResource Fluent.Ribbon.Brushes.DropDown.Resize.BackgroundBrush}">
                                        <Grid>
                                            <Thumb x:Name="PART_ResizeVerticalThumb" HorizontalAlignment="Stretch" Margin="0,0,0,-90" Width="Auto" Height="10" VerticalAlignment="Top" Cursor="SizeNS" Template="{DynamicResource ResizeVerticalThumbControlTemplate}" />
                                            <Thumb x:Name="PART_ResizeBothThumb" HorizontalAlignment="Right" Margin="0,0,0,-90" Width="10" Height="10" VerticalAlignment="Top" Cursor="SizeNWSE" Template="{DynamicResource ResizeBothThumbControlTemplate}" />
                                        </Grid>
                                    </Border>
                                </Grid>
                            </Grid>
                        </Border>
                    </Grid>
                </Popup>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="ResizeMode" Value="None">
                    <Setter Property="Visibility" TargetName="resizeBorder" Value="Collapsed" />
                </Trigger>
                <Trigger Property="ResizeMode" Value="Both">
                    <Setter Property="Visibility" TargetName="PART_ResizeVerticalThumb" Value="Collapsed" />
                    <Setter Property="Visibility" TargetName="PART_ResizeBothThumb" Value="Visible" />
                    <Setter Property="Visibility" TargetName="resizeBorder" Value="Visible" />
                </Trigger>
                <Trigger Property="ResizeMode" Value="Vertical">
                    <Setter Property="Visibility" TargetName="PART_ResizeBothThumb" Value="Collapsed" />
                    <Setter Property="Visibility" TargetName="PART_ResizeVerticalThumb" Value="Visible" />
                    <Setter Property="Visibility" TargetName="resizeBorder" Value="Visible" />
                </Trigger>
                <Trigger Property="IsDropDownOpen" Value="True">
                    <Setter Property="BorderBrush" TargetName="PART_ButtonBorder" Value="{DynamicResource Fluent.Ribbon.Brushes.Button.Pressed.BorderBrush}" />
                    <Setter Property="Background" TargetName="PART_ButtonBorder" Value="{DynamicResource Fluent.Ribbon.Brushes.Button.Pressed.Background}" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" TargetName="iconImage" Value="0.5" />
                    <Setter Property="Effect" TargetName="iconImage">
                        <Setter.Value>
                            <Fluent:GrayscaleEffect />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True" />
                        <Condition Property="IsDropDownOpen" Value="False" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" TargetName="PART_ButtonBorder" Value="{DynamicResource Fluent.Ribbon.Brushes.Button.MouseOver.Background}" />
                    <Setter Property="BorderBrush" TargetName="PART_ButtonBorder" Value="{DynamicResource Fluent.Ribbon.Brushes.Button.MouseOver.BorderBrush}" />
                </MultiTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

    </UserControl.Resources>
    <StackPanel>
        <DockPanel>
            <Fluent:Button DockPanel.Dock="Right" Size="Small"
                                    Icon="{iconPacks:Material Kind=Minus}" Command="{Binding DeleteGradientStopCommand}" Margin="5"  />
            <Fluent:Button DockPanel.Dock="Right" Size="Small"
                                    Icon="{iconPacks:Material Kind=Plus}" Command="{Binding AddGradientStopCommand}" Margin="5"  />
            <TextBlock Text="渐变光圈" VerticalAlignment="Center" Margin="5"/>
        </DockPanel>

        <Grid  Margin="5">
            <Rectangle Fill="{Binding GradientStop, Converter={StaticResource ColorBrushConverter}}" Height="4.0" VerticalAlignment="Center" />
            <ItemsControl ItemsSource="{Binding GradientStop}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid >

                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Slider Maximum="1" Minimum="0" LargeChange="0.1" SmallChange="0.01" 
                                                Value="{Binding Offset}" 
                                                Foreground="{Binding Color, Converter={StaticResource ColorBrushConverter}}" 
                                                Style="{StaticResource TransparentSlider}"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>

        <DockPanel>
            <!-- The following code shows theme colors mode for color gallery -->
            <Fluent:DropDownButton DockPanel.Dock="Right" Margin="5" Height="24" Width="60" 
                                            Template="{StaticResource RibbonDropDownButtonControlTemplate1}"
                                            MaxDropDownHeight="500">
                <Fluent:DropDownButton.Icon>
                    <Grid>
                        <Rectangle Height="22" StrokeThickness="1" Stroke="{DynamicResource Fluent.Ribbon.Brushes.AccentBaseColorBrush}">
                            <Rectangle.Fill>
                                <SolidColorBrush Color="{Binding SelectedGradientStop.Color}" />
                            </Rectangle.Fill>
                        </Rectangle>
                    </Grid>
                </Fluent:DropDownButton.Icon>
                <Fluent:ColorGallery SelectedColor="{Binding SelectedGradientStop.Color, Mode=TwoWay}"
                                                 Mode="StandardColors"
                                                 StandardColorGridRows="3"
                                                 Columns="10"
                                                 ThemeColorGridRows="5"
                                                 IsNoColorButtonVisible="True" />
            </Fluent:DropDownButton>
            <TextBlock Margin="5" VerticalAlignment="Center" Text="颜色"/>
        </DockPanel>
    </StackPanel>
</UserControl>