ViewMakerで生成するWPF/Silverlightコントロール（６）ItemsControl編
今回は意外？に便利ItemsControlについてです。特殊なフォーマットの一覧が必要な場合に活躍してくれます。
ItemsControlコントロール
WPF/Silverlightいずれも標準でふくまれております。コレクション型のプロパティを指定するとItemsControlにバインドします。ViewMakerで指定可能なListBoxの項目は以下の通りです。
-
- HasScrollViewer（ScrollViewer付で表示するか）
WPFサンプルイメージとXAMLコード
<ItemsControl Name="ItemsControl1" ItemsSource="{Binding Path=ItemsControl1,Mode=OneWay}" Margin="20"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel> <Grid Margin="5"> <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">Id</Label> <TextBox Name="Id" Text="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" /> <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="2">Name</Label> <TextBox Name="Name" Text="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="0" Grid.Column="3" /> <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0">Date</Label> <DatePicker Name="Date" SelectedDate="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" /> <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2">OnOff</Label> <CheckBox Name="OnOff" IsChecked="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="3" /> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition /> <ColumnDefinition Width="auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> </Grid> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> <ScrollViewer Name="ItemsControl2" Height="150" Margin="20"> <ItemsControl ItemsSource="{Binding Path=ItemsControl2,Mode=OneWay}"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel> <Grid Margin="5"> <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">Id</Label> <TextBox Name="Id1" Text="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" /> <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="2">Name</Label> <TextBox Name="Name1" Text="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="0" Grid.Column="3" /> <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0">Date</Label> <DatePicker Name="Date1" SelectedDate="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" /> <Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2">OnOff</Label> <CheckBox Name="OnOff1" IsChecked="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="3" /> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition /> <ColumnDefinition Width="auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> </Grid> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ScrollViewer>
SilverlightサンプルイメージとXAMLコード
<ItemsControl Name="ItemsControl1" ItemsSource="{Binding Path=ItemsControl1,Mode=OneWay}" Margin="20"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel> <Grid Margin="5"> <sdk:Label Target="{Binding ElementName=Id}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">Id</sdk:Label> <TextBox Name="Id" Text="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" /> <sdk:Label Target="{Binding ElementName=Name}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="2">Name</sdk:Label> <TextBox Name="Name" Text="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="0" Grid.Column="3" /> <sdk:Label Target="{Binding ElementName=Date}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0">Date</sdk:Label> <sdk:DatePicker Name="Date" SelectedDate="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" /> <sdk:Label Target="{Binding ElementName=OnOff}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2">OnOff</sdk:Label> <CheckBox Name="OnOff" IsChecked="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="3" /> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition /> <ColumnDefinition Width="auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> </Grid> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> <ScrollViewer Name="ItemsControl2" Height="150" Margin="20"> <ItemsControl ItemsSource="{Binding Path=ItemsControl2,Mode=OneWay}"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel> <Grid Margin="5"> <sdk:Label Target="{Binding ElementName=Id1}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">Id</sdk:Label> <TextBox Name="Id1" Text="{Binding Path=Id, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" /> <sdk:Label Target="{Binding ElementName=Name1}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="2">Name</sdk:Label> <TextBox Name="Name1" Text="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="0" Grid.Column="3" /> <sdk:Label Target="{Binding ElementName=Date1}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0">Date</sdk:Label> <sdk:DatePicker Name="Date1" SelectedDate="{Binding Path=Date, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" /> <sdk:Label Target="{Binding ElementName=OnOff1}" HorizontalContentAlignment="Left" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2">OnOff</sdk:Label> <CheckBox Name="OnOff1" IsChecked="{Binding Path=OnOff, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="3" /> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition /> <ColumnDefinition Width="auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> </Grid> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ScrollViewer>
ViewModelコード
[View(ViewControlType.StackPanel)] [ViewProperty(StackPanelViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Hidden)] [ViewProperty(StackPanelViewControl.Properties.ItemMargin, "20")] [ViewLayoutGeneratorProvider("Generate")] public class ItemsControlSample : ViewModel { [View(ViewControlType.ItemsControl)] public List<DataItem> ItemsControl1 { get; set; } [View(ViewControlType.ItemsControl)] [ViewProperty(ItemsControlViewControl.Properties.Height, 150)] [ViewProperty(ItemsControlViewControl.Properties.HasScrollViewer, true)] public List<DataItem> ItemsControl2 { get; set; } public ItemsControlSample() { ItemsControl1 = DataItem.CreateData(3); ItemsControl2 = DataItem.CreateData(10); } public static ViewLayoutItem Generate() { var svc = ServiceLocator.GetService<IViewLayoutGenerator>(); var layout = svc.Generate(typeof(ItemsControlSample), LayoutGenerateFlag.All & ~LayoutGenerateFlag.StaticProvider); var item1 = layout.FindChild("ItemsControl1").InsertChild(null, ViewControlType.Grid); item1.GetControl<GridViewControl>().ItemColumnSize = 4; var item2 = layout.FindChild("ItemsControl2").InsertChild(null, ViewControlType.Grid); item2.GetControl<GridViewControl>().ItemColumnSize = 4; return layout; } }
