Question

在WPF中，我有一个Canvas，我在背景中绘制水平线，类似于带刻线的记事本。这些行的间距绑定到视图模型。以下代码效果很好。

我现在想将画布，背景和应用的行为转换为单个customcontrol。当然，基本问题是Canvas没有Template属性，因此Generic.XAML中的TemplateBinding不存在。

如何做到这一点？非常感谢任何帮助或建议。

TIA

XAML

<!--This style used to draw background lines on the notepad canvas.-->
 <Style x:Key="notepadLines" TargetType="{x:Type Canvas}">
            <Setter Property="Background">
                <Setter.Value>
                    <DrawingBrush Stretch="None" TileMode="Tile"  ViewportUnits="Absolute">
                        <DrawingBrush.Viewport>
                            <MultiBinding>
                                <MultiBinding.Converter>
                                    <conv:RectConverter/>
                                </MultiBinding.Converter>
                                <Binding Path="WritingLayer.MainCanvas.ViewPortWidth"/>
                                <Binding Path="WritingLayer.MainCanvas.ViewPortHeight"/>
                            </MultiBinding>
                        </DrawingBrush.Viewport>
                        <DrawingBrush.Drawing>
                            <DrawingGroup>
                                <DrawingGroup.Children>
                                    <GeometryDrawing>
                                        <GeometryDrawing.Brush>
                                            <SolidColorBrush Color="Purple" Opacity="0.2" />
                                        </GeometryDrawing.Brush>
                                        <GeometryDrawing.Pen>
                                            <Pen Thickness="1" Brush="LightGreen"/>
                                        </GeometryDrawing.Pen>
                                        <GeometryDrawing.Geometry>
                                            <RectangleGeometry>
                                                <RectangleGeometry.Rect>
                                                    <MultiBinding>
                                                        <MultiBinding.Converter>
                                                            <conv:DrawingBoxConverter/>
                                                        </MultiBinding.Converter>
                                                        <Binding Path="WritingLayer.MainCanvas.DrawingBoxTop"/>
                                                        <Binding Path="WritingLayer.MainCanvas.ViewPortWidth"/>
                                                        <Binding Path="WritingLayer.MainCanvas.DrawingBoxHeight"/>
                                                    </MultiBinding>
                                                </RectangleGeometry.Rect>
                                            </RectangleGeometry>
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                    <GeometryDrawing>
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <LineGeometry StartPoint="0,0" EndPoint="{Binding WritingLayer.MainCanvas.EndPointHeight}"/>
                                                <LineGeometry StartPoint="0,0" EndPoint="{Binding WritingLayer.MainCanvas.EndPointWidth}"/>
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                        <GeometryDrawing.Pen>
                                            <Pen Thickness="1" Brush="Green"/>
                                        </GeometryDrawing.Pen>
                                    </GeometryDrawing>
                                    <GeometryDrawing>
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <LineGeometry StartPoint="{Binding WritingLayer.MainCanvas.StartPointMidline}" 
                                                              EndPoint="{Binding WritingLayer.MainCanvas.EndPointMidline}"/>
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                        <GeometryDrawing.Pen>
                                            <Pen Thickness="1" Brush="Red">
                                                <Pen.DashStyle>
                                                    <DashStyle Dashes="4,12"/>
                                                </Pen.DashStyle>
                                            </Pen>
                                        </GeometryDrawing.Pen>
                                    </GeometryDrawing>
                                </DrawingGroup.Children>
                            </DrawingGroup>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Setter.Value>
            </Setter>
        </Style>



 <Canvas x:Name="NotePad" Grid.Column="1"  Grid.Row="1" 
                    Visibility="{Binding WritingLayer.IsWriting, Converter={StaticResource BoolToVisibilityConverter}}"
                    Style="{StaticResource notepadLines}" 
                    >
                <i:Interaction.Behaviors>
                    <b:NotePadBackgroundBehavior/>
                </i:Interaction.Behaviors>
 </Canvas>

Answer 1

创建一个Canvas中有ControlTemplate的自定义控件。

<强> Generic.xaml：

    <Style TargetType="local:CustomControl">
        <Setter Property="Template">
            <Setter.Value>
                <Canvas>
                    <Canvas.Background>
                        <DrawingBrush Stretch="None" TileMode="Tile"  ViewportUnits="Absolute">
                            ...
                        </DrawingBrush>
                    </Canvas.Background>
                </Canvas>
            </Setter.Value>
        </Setter>
    </Style>

<强>控制：

public class CustomControl : Control
{
    static CustomControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl),
            new FrameworkPropertyMetadata(typeof(CustomControl)));
    }

    //... + any properties...

}

<强>用法：

<local:CustomControl />

Answer 2

O.K，做了一些改变。以下编译正确：

<Style TargetType="{x:Type local:NotePad}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="local:NotePad">
                    <Canvas>
                        <Canvas.Background>
                            <DrawingBrush Stretch="None" TileMode="Tile"  ViewportUnits="Absolute">
                                <DrawingBrush.Viewport>
                                    <MultiBinding>
                                        <MultiBinding.Converter>
                                            <conv:RectConverter/>
                                        </MultiBinding.Converter>
                                        <Binding Path="{TemplateBinding ViewPortWidth}"/>
                                        <Binding Path="{TemplateBinding ViewPortHeight}"/>

                                    </MultiBinding>
                                </DrawingBrush.Viewport>

............................................... .........

 public class NotePad : Control
    {
        static NotePad()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(NotePad), new FrameworkPropertyMetadata(typeof(NotePad)));
        }

        #region [ViewPortWidth]
        public double ViewPortWidth
        {
            get { return (double)GetValue(ViewPortWidthProperty); }
            set { SetValue(ViewPortWidthProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ViewPortWidth.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ViewPortWidthProperty =
            DependencyProperty.Register("ViewPortWidth", typeof(double), typeof(NotePad), new PropertyMetadata(0.0));

        #endregion

在Generic.xaml中绑定画布背景以进行自定义控件

2 个答案: