ケース1
ListBox内部にUserControlをアイテムとして表示する際に、内部に表示したUserControlが下図のようにListBoxの幅いっぱいまで広がってくれないことがある。
実際には下図のように表示したい。
ここからコードを交えて解説してく。
SampleUserControl - ListBox内部に表示するUserControl
SampleUserControl.xaml
<Border BorderBrush="RoyalBlue" BorderThickness="2" CornerRadius="3" HorizontalAlignment="Stretch"> <TextBlock x:Name="_text" TextWrapping="Wrap" /> </Border>
SampleUserControl.xaml.cs
public SampleUserControl() { InitializeComponent(); _text.SetBinding(TextBlock.TextProperty, new Binding() { Source = this, Path = new PropertyPath("Text") }); } public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } } public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(SampleUserControl), new PropertyMetadata("Sample Text"));
上記のコードはListBox内部に表示するUserControlの詳細になる。ListBoxからテキストをDataBindingできるようにTextをDependency Propertyにしている以外はいたって普通のコードだ。
MainPage.xaml
<UserControl.Resources> <Style x:Key="ListBoxItemContainerStyle" TargetType="ListBoxItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> </Style> </UserControl.Resources> <Border BorderBrush="Tomato" CornerRadius="2" Padding="2" Margin="2" BorderThickness="2" Width="300" > <ListBox ItemsSource="{Binding TextList}" ItemContainerStyle="{StaticResource ListBoxItemContainerStyle}" Margin="5,5" > <ListBox.ItemTemplate> <DataTemplate> <application:SampleUserControl Text="{Binding}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Border>
MainPage.xaml.cs
public MainPage() { InitializeComponent(); TextList = new List<string> { "Silverlightサンプル", "マツオソフトウェア", "Yoo Matsuo", }; this.DataContext = this; } public List<string> TextList { get; set; }
MainPage.xamlのポイントはListBoxのItemContainerStyleに渡しているResourcesで定義したStyleだ。このStyleでHorizontalContentAlignmentをStrechとしている。これでListBox内部のアイテムがListBoxの幅いっぱいまで広がって表示されるようになる。
ケース2
ListBox内部にUserControlをアイテムとして表示する際に、内部に表示したUserControlが下図のようにListBoxの幅を超えてどこまでも広がっていってしまうことがある。
ListBoxの幅で折り返したい。
この対処方はしごく簡単で、ListBoxの宣言部に下記を追加すればよい。
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
これでListBoxの幅で折り返されるはずだ。ちなみにSampleUserControl.xamlでTextBlockのTextWrapping="Wrap"を設定しているが、これを忘れると今回のサンプルではUserControlの表示そのものがListBoxの幅で切り取られてしまうので注意して欲しい。