やりたいこと
画面上に、複数の線を描きたいときに、Polylineを使おうと思ったが、画面のxamlに「Polyline・・」を何個(何十個)も書きたくないので、コレクションにPolylineをAddするだけで画面に線を追加したい。
結果
ItemsControl.ItemsPanelにItemsPanelTemplateを入れて、「Grid」や「Canvas」を指定するとできる。
具体的には、下記のようにする。
<ItemsControl ItemsSource="{Binding Pl}" Width="600" Height="600">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ItemsPresenter Margin="10" />
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!-- ここに、Gridを指定する。-->
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
バインドしたプロパティをもつViewModelは下記のようにしている。
namespace WpfApp1
{
class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
// ItemsControlのSourceに設定するコレクション
public ObservableCollection<Polyline> Pl { get { return pl; } }
public ObservableCollection<Polyline> pl = new ObservableCollection<Polyline>();
// DataTemplateの中にバインドしたいプロパティ
public Thickness MyThickness { get; } = new Thickness(20);
public ViewModel()
{
Polyline pl1 = new Polyline();
pl1.Points.Add(new Point(10, 10));
pl1.Points.Add(new Point(200, 150));
pl1.Stroke = new SolidColorBrush(Colors.Red);
pl1.StrokeThickness = 5;
pl.Add(pl1);
Polyline pl2 = new Polyline();
pl2.Points.Add(new Point(15, 15));
pl2.Points.Add(new Point(250, 600));
pl2.Points.Add(new Point(600, 400));
pl2.Stroke = new SolidColorBrush(Colors.Yellow);
pl2.StrokeThickness = 5;
pl.Add(pl2);
}
}
}
ItemsControlについて
ItemsControlは、ListBoxの継承元のクラス。使い方は、下記を参照。
https://qiita.com/tera1707/items/363d2a33eadcb3eb275a
Gridでないものを指定したとき
ListBoxを使う場合など、普通は縦や横に項目を並べたいと思うので、Gridではなく、StackPanelやWrapPanelを指定すると思う。
例えばStackPanelを指定すると、こうなる。
(2つのPolylineが、縦に並んでいる)
参考
自分のページ(ListBox関連)
https://qiita.com/tera1707/items/363d2a33eadcb3eb275a
ItemsControl 攻略 ~ 外観のカスタマイズ
http://grabacr.net/archives/1240
コード
Comments
Let's comment your feelings that are more than good