WPF - 標誌用圖釘

我需要在WPF應用程序來顯示的圖像（固定大小）的圖像。
它應該能夠用圖像標記圖像，如上圖所示。
它應該能夠爲每個引腳添加說明，並且在引腳上懸停時應該顯示說明。
最後，我需要保存SQL數據庫中的所有信息，以再次顯示引腳。

是否有可能通過創建自定義控件來實現這一點？請將您的想法告訴我實施此解決方案。提供示例將不勝感激。

來源

2015-12-14 Rahul

回答你的問題：是的，這是可能的。

當使用WPF時，我強烈建議使用MVVM體系結構模式。你需要的是：

一個canvas控制，以使用絕對定位
的image控制，將顯示背景圖片
自定義引腳控制將顯示在銷的形象。該控件還可以包含一個DataTemplate，用於生成描述控件。
將顯示有關引腳信息的自定義控件（將在彈出窗口中使用）
將在adorner圖層中呈現引腳信息彈出窗口的adorner。將裝飾者裝飾器放置在與畫布相同的位置。

，你需要存儲有關引腳的信息：

其Canvas.Top和Canvas.Left值影響其視覺特性
屬性（例如圖像，顏色等）
彈出窗口中顯示的信息（例如說明，圖片）

然後，您可以讀取數據庫中的所有條目並創建一個引腳查看每個條目的模型並將視圖模型綁定到畫布中的項目控件。不要忘記將引腳控件的屬性綁定到其視圖模型的相應值（例如Canvas.Left，Canvas.Top，Description等）。

對於彈出窗口，一旦創建了裝飾者類，當需要顯示彈出窗口並在需要關閉彈出窗口時將其刪除時，將其實例添加到畫布的裝飾圖層。

地圖控制在下面可以看到的樣式的一個實例（假定視圖地圖控制的模型包含引腳的可觀察到的集合）：

<Style TargetType="{x:Type local:Map}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:Map}"> 
       <Border Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}"> 

        <Grid> 
         <AdornerDecorator></AdornerDecorator> 

         <ItemsControl ItemsSource="{Binding Path=Items}"> 
          <ItemsControl.ItemsPanel> 
           <ItemsPanelTemplate> 
            <Canvas Background="White"> 

            </Canvas> 
           </ItemsPanelTemplate> 
          </ItemsControl.ItemsPanel> 
          <ItemsControl.ItemTemplate> 
           <DataTemplate> 
            <local:Pin></local:Pin> 
           </DataTemplate> 
          </ItemsControl.ItemTemplate> 
          <ItemsControl.ItemContainerStyle> 
           <Style> 
            <Setter Property="Canvas.Top" Value="{Binding Path=Y}" /> 
            <Setter Property="Canvas.Left" Value="{Binding Path=X}" /> 
           </Style> 
          </ItemsControl.ItemContainerStyle> 
         </ItemsControl> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

下面是簡單地呈現一個裝飾器控制的示例給出FrameworkElement的：

public class ControlAdorner : Adorner { 

    FrameworkElement _control; 
    public FrameworkElement Control { 
     get { 
      return (_control); 
     } 
     set { 
      _control = value; 
     } 
    } 

    public ControlAdorner(UIElement Element, FrameworkElement Control) 
     : base(Element) { 
     this.Control = Control; 
     this.AddVisualChild(this.Control); 
     this.IsHitTestVisible = false; 
    } 

    protected override Visual GetVisualChild(int index) { 
     if (index != 0) throw new ArgumentOutOfRangeException(); 
     return _control; 
    } 

    protected override int VisualChildrenCount { 
     get { 
      return 1; 
     } 
    } 

    public void UpdatePosition(Point point) { 
     VisualOffset = new Vector(point.X, point.Y); 
     this.InvalidateVisual(); 
    } 

    protected override Size MeasureOverride(Size constraint) { 
     Control.Measure(constraint); 
     return Control.DesiredSize; 
    } 

    protected override Size ArrangeOverride(Size finalSize) { 
     Control.Arrange(new Rect(new Point(VisualOffset.X, VisualOffset.Y - 20), finalSize)); 
     return new Size(Control.ActualWidth, Control.ActualHeight); 
    } 
}

下面是如何使引腳控制顯示，當鼠標懸停裝飾器：

public class Pin : Control { 
    public DataTemplate DescriptionItemTemplate { 
     get { return (DataTemplate)GetValue(DescriptionItemTemplateProperty); } 
     set { SetValue(DescriptionItemTemplateProperty, value); } 
    } 
    public static readonly DependencyProperty DescriptionItemTemplateProperty = 
     DependencyProperty.Register("DescriptionItemTemplate", typeof(DataTemplate), typeof(Pin), new PropertyMetadata(null)); 




    ControlAdorner _adorner; 
    AdornerLayer _adornerLayer; 

    static Pin() { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof(Pin), new FrameworkPropertyMetadata(typeof(Pin))); 
    } 

    public Pin() { 
     this.MouseEnter += Pin_MouseEnter; 
     this.MouseLeave += Pin_MouseLeave; 
    } 

    private void Pin_MouseEnter(object sender, MouseEventArgs e) { 
     _adornerLayer = AdornerLayer.GetAdornerLayer(this); 

     FrameworkElement element = DescriptionItemTemplate.LoadContent() as FrameworkElement; 
     if (element == null) { return; } 
     element.DataContext = this.DataContext; 

     _adorner = new ControlAdorner(this, element); 
     _adornerLayer.Add(_adorner); 
    } 


    private void Pin_MouseLeave(object sender, MouseEventArgs e) { 
     _adornerLayer.Remove(_adorner); 
     _adorner = null; 
    } 
}

來源

2015-12-14 13:04:14

WPF - 標誌用圖釘

回答

相關問題