だらだらやるよ。

こげつのIT技術メモ

リストボックスの幅の中にあるGridを適切なサイズにする。

WP7 SilverLight

スマートフォンアプリケーションの開発をしてると、やっぱり出てくるこの問題。
個人的にはiPhoneは常に縦ロックしてる程度には使わない機能なんですけどね（動画見るときくらいかなー）
イモスタ時代は横もちメインだったんだけどなー。。。


まあそれはおいといて。
WP7でリストボックスの中のテンプレートにGridを設定した場合、
グリッドがうまく広がってくれません。
ぐぐるといくつかサンプルが見つかるのですが、実はそれは罠。
WPFのコードであることが見つかった場合そこではまります。。。
どうもSilver Lightのバグでうまく動かないとのこと。
というわけでいくつかのサイトのさんぷるを試しながら色々やった結果がこれ。
無事ちゃんと動くようになってます。

<ListBox Height="Auto" Margin="0,0,0,0" Name="SampleList" VerticalAlignment="Top" ItemsSource="{Binding}" Background="#00995B5B" DataContext="{Binding}" d:LayoutOverrides="Width" HorizontalAlignment="Stretch"  HorizontalContentAlignment="Stretch">
	<ListBox.ItemContainerStyle>
		<Style TargetType="ListBoxItem">
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
		</Style>            
	</ListBox.ItemContainerStyle>
	<ListBox.ItemTemplate>
		<DataTemplate>
			<Grid Height="167" HorizontalAlignment="Stretch">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="1*" ></ColumnDefinition>
					<ColumnDefinition Width="1*" ></ColumnDefinition>
					<ColumnDefinition Width="1*" ></ColumnDefinition>
				</Grid.ColumnDefinitions>
				<Button Grid.Column="0" Grid.Row="1" Content="" Height="133" Margin="10,0,10,0" VerticalAlignment="Center" Width="133" HorizontalAlignment="Center"/>
				<Button Grid.Column="1" Grid.Row="1" Content="" Height="133" Margin="10,0,10,0" VerticalAlignment="Center" Width="133" HorizontalAlignment="Center"/>
				<Button Grid.Column="2" Grid.Row="1" Content="" Height="133" Margin="10,0,10,0" VerticalAlignment="Center" Width="133" HorizontalAlignment="Center"/>
			</Grid>
		</DataTemplate>
	</ListBox.ItemTemplate>
</ListBox>

僕の場合は3つの要素を等間隔で配置したリストを作りたかったのでこんな感じに。
縦横の幅に合わせてるコードは、1行目の

 HorizontalAlignment="Stretch"  HorizontalContentAlignment="Stretch"

と、9行目、Gridタグの部分

 HorizontalAlignment="Stretch"

これでいけるっていう記述はいくつか見かけたのですが実際はいけませんでした。
これが罠で、以下のブロックを追加しないとSLでは動かないみたいです。

	<ListBox.ItemContainerStyle>
		<Style TargetType="ListBoxItem">
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
		</Style>            
	</ListBox.ItemContainerStyle>

ちなみにグリッドは3つの横幅をパーセンテージで指定して、
それぞれの要素を1個だけ入れたものをセンタリングすることによりそれぞれ等間隔で並ぶようにしています。
この辺は普通に作るのとあんまり変わらないですね。好みで作り変えちゃってください。


できるだけ横幅の直接入力はしないようにしないと、適切な感じに縦横対応してくれませんねー！