The above image is an example of the options menu in MS Word 2010 when you click on the text field of a document. I am trying to implement something like this using adorners in WPF and am currently struggling with implementation.
I created 2 applications called optionsButtonAdorner and AdvancedOptionsAdorner. When I click on my item on the canvas, I show the ButtonAdorner options with a little moving animation, and when I click on the ButtonAdorner options, then I show AdvancedOptionsAdorner with the same moving animation. I correctly completed the above task, and my system correctly displays both browsers in the same way as above.
, - AdvancedOptionsAdorner, adorner, HitTest ( , ). snoop , , , hittest - true. , , , adorner. , . AdvancedOptionsAdorner
.
public DesignerItemAdvancedOptionsAdorner(DesignerControl designerItem):base(designerItem)
{
_designerItem = designerItem;
DataTemplate dataTemplate = (DataTemplate)FindResource("DesignerItemAdvancedOptionsAdorner");
_contentPresenter = new ContentPresenter() { ContentTemplate = dataTemplate, Opacity = 0.75 };
Loaded += DesignerItemAdvancedOptionsAdorner_Loaded;
Unloaded += DesignerItemAdvancedOptionsAdorner_Unloaded;
}
private void DesignerItemAdvancedOptionsAdorner_Loaded(object sender, RoutedEventArgs e)
{
double newDistance = Math.Round((_designerItem.ControlActualWidth * ActiveZoomLevel) + 50);
AnimateMargin(new Thickness((_designerItem.ControlActualWidth * ActiveZoomLevel) + 45, 0, 0, 0), new Thickness(newDistance, 0, 0, 0), 0.1);
}
protected override Visual GetVisualChild(int index)
{
return _contentPresenter;
}
protected override int VisualChildrenCount
{
get { return 1; }
}
adorner
<DataTemplate x:Key="DesignerItemAdvancedOptionsAdorner">
<Grid RenderTransformOrigin="0.5,0.5" Margin="0,-10,0,0" Height="320" Width="160" HorizontalAlignment="Left">
<Path Stroke="{DynamicResource ApplicationPrimaryColour}" StrokeThickness="1" Fill="White">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="0,0,140,280">
<RectangleGeometry.Transform>
<TranslateTransform X="10" />
</RectangleGeometry.Transform>
</RectangleGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<PathGeometry>
<PathFigure StartPoint="0,20">
<LineSegment Point="10,10" />
<LineSegment Point="10,30" />
</PathFigure>
</PathGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
<TextBlock Text="Options" HorizontalAlignment="Center" VerticalAlignment="Top" FontWeight="Bold" Margin="0,5,0,0"/>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Height="40" Width="100" Content="Test"/>
</Grid>
</DataTemplate>
, adorners.
-
, ,
, GetVisualChild VisualChildrenCount. VisualCollection adorner contentPresenter , , visualCollection [i] VisualChild visualCollection.Count VisualChildrenCount.
, ui, dataContext Item , , AdvancedOptions, Comismite Commands Prism, ViewModels