凝縮された質問: WPF スタイルでは、スタイリングしているオブジェクトのデータのプロパティにどのようにアクセスしますか?
style ----- this access--------
UI object |
data |
property{get;set;} <-- | Access this
/data
/UI object
/style
ポリゴンの束を表示する ItemsControl があります。
コード：
<ItemsControl x:Name="TopVectorItemControl" Grid.Row="1" ItemsSource="{Binding TopVectorData}"
SizeChanged="TimelineItemsControl_SizeChanged" MouseRightButtonUp="TimelineItemControl_MouseRightButtonUp">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Common:ZoomableCanvas x:Name="TopAxis" Background="#FF65656C" Grid.Row="1" AllowDrop="True" IsVirtualizing="False"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl MouseDoubleClick="Polygon_DoubleClicked">
<Polygon Points="{Binding Points, Converter={StaticResource PointsConverter}}" Tag="{Binding Tag}" Stroke="Black"
Fill="{Binding DirectionProp, Converter={StaticResource FillConverterTopBottomAxis}}" />
</ContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
ユーザーが多角形をダブルクリックすると、ユーザーが多角形の形状/サイズを変更できるようにするスタイル (これらは多角形の各ポイントの装飾です) を適用します。
スタイルコード:
<Style x:Key="ThumbStyleLeft" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="21">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Ellipse Width="8" Height="8" Stroke="Black" StrokeThickness="1" Grid.Row="1" Grid.Column="1"
Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1,1,0,0">
<Ellipse.Fill >
<SolidColorBrush Color="Blue" Opacity=".5"></SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
<Label Content="000" Grid.Column="0" FontFamily="Segoe UI Semibold" FontSize="7" Foreground="Black" Padding="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
写真：
「000」の代わりに、ラベルのコンテンツを設定する必要があります
<Label Content="000" Grid.Column="0" FontFamily="Segoe UI Semibold" FontSize="7" Foreground="Black" Padding="0" />
スタイルで、プロパティに:
public String TestingLabel {get;set;}
これは、ポリゴンの「ポイント」へのバインディングと同じクラスとレベルにあります
<Polygon Points="{Binding Points, Converter={StaticResource PointsConverter}}" Tag="{Binding Tag}" Stroke="Black" Fill="{Binding DirectionProp, Converter={StaticResource FillConverterTopBottomAxis}}" />
どうすればこれを行うことができますか？
私が試してみました：
{TemplateBinding TestingLabel}
{Binding Path=TestingLabel, RelativeSource={RelativeSource Self}}
成功せずに。
親指にスタイルを追加するための私のコードは次のとおりです。
public class AxisSelectionAdorners : Adorner
{
private readonly Grid timelineGrid;
private readonly ArrayList thumbArrray;
private readonly TimelineItem timelineItem;
private readonly VisualCollection visualChildren;
public AxisSelectionAdorners(UIElement adornedElement, TimelineItem elementAt, Grid grid)
: base(adornedElement)
{
thumbArrray = new ArrayList();
visualChildren = new VisualCollection(this);
timelineItem = elementAt;
this.timelineGrid = grid;
attachAdorners((Polygon)adornedElement);
}
protected override Size ArrangeOverride(Size finalSize)
{
var adornedElement = this.AdornedElement as FrameworkElement;
var polygon = (Polygon)adornedElement;
var p = new Point();
if (polygon != null)
{
Thumb thumb;
for (int i = 0; i < polygon.Points.Count; i++)
{
p = polygon.Points[i];
thumb = (Thumb)thumbArrray[i];
if ((i == (int)TagId.Start) || (i == (int)TagId.FadeInEnd) || (i == (int)TagId.FadeInMag))
{
thumb.Arrange(new Rect(p.X - 17, p.Y - 16, 22, 25));
}
else if ((i == (int)TagId.End) || (i == (int)TagId.FadeOutMag) || (i == (int)TagId.FadeOutStart))
{
thumb.Arrange(new Rect(p.X - 5, p.Y - 16, 20, 25));
}
else
{
thumb.Arrange(new Rect(p.X - 5, p.Y - 5, 10, 10));
}
}
p.X = (polygon.Points[(int)TagId.End].X - polygon.Points[(int)TagId.Start].X) / 2;
p.X += polygon.Points[(int)TagId.Start].X;
p.Y = polygon.Points[(int)TagId.FadeInEnd].Y;
thumb = (Thumb)thumbArrray[polygon.Points.Count];
thumb.Arrange(new Rect(p.X, p.Y, 14, 17));
p.X += 15;
thumb = (Thumb)thumbArrray[polygon.Points.Count+1];
thumb.Arrange(new Rect(p.X, p.Y, 15, 9));
}
return finalSize;
}
private void BuildCorner(ref Thumb thumb, Cursor tempCursor, int id)
{
thumb.Height = 20;
thumb.Width = 30;
thumb.Cursor = tempCursor;
Style style;
if (id == (int)TagId.Direction)
{
// build style in code so we can bind the mouse click
thumb.Height = 30;
var s =new Style();
var grid = new FrameworkElementFactory(typeof(Grid));
var label = new FrameworkElementFactory(typeof(Label));
label.SetValue(Label.ContentProperty, "<>");
label.SetValue(Label.FontSizeProperty, 9d);
label.SetValue(Label.PaddingProperty, new Thickness(0));
label.SetValue(Label.FontFamilyProperty, new FontFamily("Verdana"));
label.AddHandler(MouseLeftButtonDownEvent, new MouseButtonEventHandler(DirectionThumbClick));
grid.AppendChild(label);
var ct = new ControlTemplate(typeof(Thumb)) { VisualTree = grid };
s.Setters.Add(new Setter(MainWindow.TemplateProperty, ct));
style = s;
}
else
{
if ((id == (int)TagId.Start) || (id == (int)TagId.FadeInEnd) || (id == (int)TagId.FadeInMag))
{
style = (Style)Application.Current.Resources["ThumbStyleLeft"];
}
else if (id == (int)TagId.Middle)
{
thumb.Height = 17;
thumb.Width = 14;
style = (Style)Application.Current.Resources["ThumbStyle"];
}
else
{
style = (Style)Application.Current.Resources["ThumbStyleRight"];
}
}
thumb.Style = style;
thumb.Opacity = 0.80;
visualChildren.Add(thumb);
}
private void attachAdorners(Polygon polygon)
{
for (int i = 0; i <= polygon.Points.Count+1; i++)
{
var p = new Point();
var thumb = new Thumb();
Cursor tempCursor = null;
if (i < polygon.Points.Count)
{
p = polygon.Points[i];
}
switch (i)
{
case (int)TagId.Start:
case (int)TagId.End:
tempCursor = Cursors.SizeWE;
break;
case (int)TagId.FadeOutStart:
case (int)TagId.FadeInEnd:
tempCursor = Cursors.SizeNWSE;
break;
case (int)TagId.FadeOutMag:
case (int)TagId.FadeInMag:
tempCursor = Cursors.SizeNS;
break;
case (int)TagId.Middle:
tempCursor = Cursors.Hand;
break;
case (int)TagId.Direction:
tempCursor = Cursors.Arrow;
thumb.MouseRightButtonDown += this.DirectionThumbClick;
break;
}
BuildCorner(ref thumb, tempCursor, i);
thumb.Tag = i;
thumb.DragDelta += this.ThumbDragDelta;
thumb.MouseEnter += this.ThumbOnMouseEnter;
thumbArrray.Add(thumb);
}
}
}
これは、親指（装飾者）をポリゴンに取り付けるコードです。
private void Polygon_DoubleClicked(object sender, MouseButtonEventArgs e)
{
if (e.OriginalSource is Shape)
{
UIElement uie = (UIElement)e.OriginalSource;
Polygon p = e.OriginalSource as Polygon;
if (p != null)
{
var tag = p.Tag as TimelineTag;
//TimelineCollection is an ObservableCollection<>
TimelineCollection collection = this.GetCollectionBasedOnTagLevel(tag);
if (tag != null && ((TimelineItem)collection.ElementAt(tag.Id)).IsEditing)
{
AdornerLayer adornerlayer = AdornerLayer.GetAdornerLayer(uie);
p.Stroke = new SolidColorBrush(Color.FromRgb(000, 000, 000));
Adorner[] toRemoveArray = adornerlayer.GetAdorners(uie);
if (toRemoveArray != null)
{
for (int x = 0; x < toRemoveArray.Length; x++)
{
adornerlayer.Remove(toRemoveArray[x]);
}
}
((TimelineItem)collection.ElementAt(tag.Id)).IsEditing = false;
selectedPolygon = null;
}
else
{
if (tag != null)
{
if (((TimelineItem)collection.ElementAt(tag.Id)).Type == TimelineItem.TimelineItemType.Axis)
{
var sel = new AxisSelectionAdorners(
uie, (TimelineItem)collection.ElementAt(tag.Id), this.TimelineGrid);
p.Stroke = new SolidColorBrush(Color.FromRgb(255, 255, 255));
AdornerLayer adornerlayer = AdornerLayer.GetAdornerLayer(uie);
adornerlayer.Add(sel);
}
else if (((TimelineItem)collection.ElementAt(tag.Id)).Type
== TimelineItem.TimelineItemType.Square)
{
var sel = new SquareSelectionAdorners(
uie, (TimelineItem)collection.ElementAt(tag.Id), this.TimelineGrid);
p.Stroke = new SolidColorBrush(Color.FromRgb(255, 255, 255));
AdornerLayer adornerlayer = AdornerLayer.GetAdornerLayer(uie);
adornerlayer.Add(sel);
}
((TimelineItem)collection.ElementAt(tag.Id)).IsEditing = true;
selectedPolygon = p;
}
}
}
}
}