第４回 Viewをそれっぽくする

今回は貧相だった見た目を少しだけ改善します。
変更するのはWindow1.xamlです。
Window1という名前はViewが増えたらそのうち変更します。

<Window x:Class="WTwitter.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WTwitter" Height="300" Width="300" >
 <DockPanel>
  <ListBox ItemsSource="{Binding Path=AllItems}"
     ScrollViewer.HorizontalScrollBarVisibility="Disabled"
     HorizontalContentAlignment="Stretch">
   <ListBox.ItemTemplate>
    <DataTemplate>
     <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Margin="1">
      <StackPanel>
       <TextBlock Text="{Binding Path=Name}"/>
       <TextBlock Text="{Binding Path=Text}" TextWrapping="Wrap"/>
      </StackPanel>
     </Border>
    </DataTemplate>
   </ListBox.ItemTemplate>
  </ListBox>
 </DockPanel>
</Window>

今回変更はこれだけです。

外側から見ていきましょう。
Windowの中にDockpanelがあります。
Dockpanelは中のもの（今回はListbox）を領域いっぱいに表示します。

Listboxは前回同様AllItemsを表示しますが、フォーマットを指定しています。
まずScrollViewer.HorizontalScrollBarVisibility="Disabled"で、
ウィンドウの大きさで折り返すようにしています。
HorizontalContentAlignment="Stretch"は個々のアイテムが
Listboxの幅より小さい場合、Listboxの幅まで広げます。
よくわからない場合はそれぞれのオプションを消してみて実行すると違いがわかると思います。

  <ListBox>
   <ListBox.ItemTemplate>
    <DataTemplate>
     <Border >
     </Border>
    </DataTemplate>
   </ListBox.ItemTemplate>
  </ListBox>

この形は、Listboxを作って
そのListboxのItemTemplateプロパティに
（その中に書いている）DataTemplateを代入する
DataTemplateの中身はBorder以下、ということです。

Borderは枠線です。
Borderの直下には１個しか要素をいれることができないので、
StackPanelをいれます。
StackPanelは中に複数の要素をいれることができて、
デフォルトでは上から順番に積んでいきます。
今回は２つのTextBlockを表示します。
StackPanel自体はレイアウトを決めるもので、表示はされません。
StackPanelの効果がわかりづらい場合はGridにすると、
２つのTextblockが重なって表示されてしまうのがわかると思います。

今回のソースコード
http://wtwitter.codeplex.com/SourceControl/changeset/view/38200