だらだらやるよ。 このページをアンテナに追加 RSSフィード

 

2011-06-17

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

| リストボックスの幅の中にあるGridを適切なサイズにする。 - だらだらやるよ。 を含むブックマーク リストボックスの幅の中にあるGridを適切なサイズにする。 - だらだらやるよ。 のブックマークコメント

スマートフォンアプリケーションの開発をしてると、やっぱり出てくるこの問題。

個人的には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個だけ入れたものをセンタリングすることによりそれぞれ等間隔で並ぶようにしています

この辺は普通に作るのとあんまり変わらないですね。好みで作り変えちゃってください。


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

このブログは清野竜矢の個人的なものです。ここで述べられていることは私の個人的な意見に基づくものであり、 私の雇用者には一切の関係はありません。