WPF Diagram Designer Part 1

&tag(WPF Diagram Designer Part 1);

目次†[edit]

参考情報†[edit]

• WPF Diagram Designer: Part 1 - CodeProject

前準備†[edit]

• 単に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>
  

動かす†[edit]

• ドラッグで動かすために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>
  

リサイズする†[edit]

• 次のような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>
  

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

最新の20件