C# WPF：实现可伸缩的自定义控件

我正在开发一个ColorPicker控件，并决定最好将其由基本控件组成，以便能够在控件模板中重新排列各种滑块和色轮，而无需重新定义所有内容。（控制代码也会变得相当混乱）

我已经为

滑块

控件创建了一个新模板，我希望它具有可伸缩性。目前，拇指的大小是固定的，中间的“轨迹”也是固定的

然而，这仍然无法缩放拇指三角形，还有一个视觉问题，我不知道如何仅在XAML中解决它。也就是说，拇指延伸到杆的底部

更新2：为了使问题更加具体，并希望减少“基于意见”，可以将问题重新表述为：

---

有什么选项可以使控件由不同的部分组成，上面的示例尤其具有可伸缩性。

最简单的方法是使用viewbox

---

这里可以选择装饰物。第二，除非您有光栅内容，否则viewbox可能不会降低质量。请使用带有*大小的行和列的网格，以便控件在其中增长。为什么会有这样的“混乱”和“拇指的比例很难正确”？你的问题对于本网站来说是离题的，因为它主要是基于观点的：许多好的问题会根据专家经验产生一定程度的观点，但对这个问题的回答往往几乎完全基于观点，而不是事实，参考资料，或特定的专业知识。如果您不编辑它，使其不那么基于意见，那么堆栈溢出社区将投票关闭它。@pushpraj抱歉，我不知道如何在这里使用装饰器，因为它是延伸到条本身的拇指。尽管你是对的，但如果使用矢量图形，ViewBox的质量不会降低。@Martin Liversage我添加了一个使用网格的示例来说明出现的问题，或者更好地说明网格无法解决的问题。

<Style x:Key="ColorSlider" TargetType="{x:Type Slider}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Slider}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <Rectangle Grid.Column="1" Width="80" Height="480" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                    <GradientStop Color="White" Offset="0.0"/>
                                    <GradientStop Color="Black" Offset="1.0"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>

                        <Track x:Name="PART_Track">
                            <Track.Thumb>
                                <Thumb x:Name="ValueThumb">
                                    <Thumb.Style>
                                        <Style TargetType="Thumb">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                                                            <Rectangle Width="100" Height="20" Fill="Transparent"/>
                                                            <Polygon Points="0,0 0,20 10,10" Fill="Black" />
                                                            <Polygon Points="100,0 100,20 90,10" Fill="Black" />
                                                        </Canvas>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Thumb.Style>
                                </Thumb>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ColorSlider" TargetType="{x:Type Slider}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Slider}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" MinHeight="5" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" MinHeight="5" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" MinWidth="10" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" MinWidth="10" />
                        </Grid.ColumnDefinitions>

                        <Rectangle Grid.Column="1" Grid.Row="1">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                    <GradientStop Color="White" Offset="0.0"/>
                                    <GradientStop Color="Black" Offset="1.0"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>

                        <Track x:Name="PART_Track" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" Grid.RowSpan="2">
                            <Track.Thumb>
                                <Thumb x:Name="ValueThumb">
                                    <Thumb.Style>
                                        <Style TargetType="Thumb">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                                                            <Rectangle Height="20" Fill="Transparent"/>
                                                            <Polygon Points="0,0 0,20 10,10" Fill="Black" />
                                                            <Polygon Points="100,0 100,20 90,10" Fill="Black" />
                                                        </Canvas>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Thumb.Style>
                                </Thumb>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>