Tag: WPF Diagram Designer Part 1

目次

参考情報

前準備

  • 単にCanvasに青の円を表示する。ControlTemplateを使って抽象化している。
     <Canvas>    
       <Canvas.Resources>
          <ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
             <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
          </ControlTemplate>
       </Canvas.Resources>  
       <ContentControl Name="DesignerItem"
                       Width="100"
                       Height="100"
                       Canvas.Top="100"
                       Canvas.Left="100"
                       Template="{StaticResource DesignerItemTemplate}">
          <Ellipse Fill="Blue"/>
       </ContentControl>
    </Canvas>
    

動かす

  • ドラッグで動かすためにMoveThumbというクラスを導入する。このクラスはThumbを継承(ドラッグ&ドロップの元として適している)。
            public MoveThumb()
            {
                DragDelta += new DragDeltaEventHandler(this.MoveThumb_DragDelta);
            }
    
            private void MoveThumb_DragDelta(object sender, DragDeltaEventArgs e)
            {
                //ドラッグ&ドロップされたときのイベントハンドラー
                Control item = this.DataContext as Control;
    
                if (item != null)
                {
                    //DataContextにセットされたアイテムの現在位置を取得し、デルタ分移動させる。
                    double left = Canvas.GetLeft(item);
                    double top = Canvas.GetTop(item);
    
                    Canvas.SetLeft(item, left + e.HorizontalChange);
                    Canvas.SetTop(item, top + e.VerticalChange);
                }
            }
    
  • XAMLを変更。MoveThumbが青い円に重なって表示される。MoveThumbはDataContextにセットされたContentControlを移動させるが、中に含まれる自分も移動することになる。
            <Canvas>
                <Canvas.Resources>
                    <ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
                        <Grid>
                            <s:MoveThumb DataContext="{Binding RelativeSource={RelativeSource TemplatedParent} }" Cursor="SizeAll"/>
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
                        </Grid>
                    </ControlTemplate>
                </Canvas.Resources>
                <ContentControl Name="DesignerItem" 
                                Width="100"
                                Height="100"
                                Canvas.Top="100"
                                Canvas.Left="100"
                                Template="{StaticResource DesignerItemTemplate}"
                                >
                    <Ellipse Fill="Blue"/>
                </ContentControl>
            </Canvas>
    

リサイズする

  • 次のようなControlTemplateを作ればリサイズ用のデコレーターを表示できる(ただし何の動作もなし)
            <Canvas>
                <Canvas.Resources>
                    <ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type s:MoveThumb}">
                        <Rectangle Fill="Transparent"/>
                    </ControlTemplate>
                    <ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="Control">
                        <Grid>
                            <Thumb Height="3" Cursor="SizeNS" Margin="0 -4 0 0" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
                            <Thumb Width="3" Cursor="SizeWE" Margin="-4 0 0 0" VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
                            <Thumb Width="3" Cursor="SizeWE" Margin="0 0 -4 0" VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
                            <Thumb Height="3" Cursor="SizeNS" Margin="0 0 0 -4" VerticalAlignment="Bottom"  HorizontalAlignment="Stretch"/>
                            <Thumb Width="7" Height="7" Cursor="SizeNWSE" Margin="-6 -6 0 0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                            <Thumb Width="7" Height="7" Cursor="SizeNESW" Margin="0 -6 -6 0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
                            <Thumb Width="7" Height="7" Cursor="SizeNESW" Margin="-6 0 0 -6" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                            <Thumb Width="7" Height="7" Cursor="SizeNWSE" Margin="0 0 -6 -6" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                        </Grid>
                    </ControlTemplate>
                    <ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
                        <Grid>
                            <s:MoveThumb 
                                Template="{StaticResource MoveThumbTemplate}"
                                DataContext="{Binding RelativeSource={RelativeSource TemplatedParent} }" Cursor="SizeAll"/>
                            <Control Template="{StaticResource ResizeDecoratorTemplate}"/>
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
                        </Grid>
                    </ControlTemplate>
                </Canvas.Resources>
                <ContentControl Name="DesignerItem" 
                                Width="100"
                                Height="100"
                                Canvas.Top="100"
                                Canvas.Left="100"
                                Template="{StaticResource DesignerItemTemplate}"
                                >
                    <Ellipse Fill="Blue"/>
                </ContentControl>
            </Canvas>
    

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-04-13 (水) 16:48:27