WrapPanel mit Data Binding

Ein sehr beliebtes Steuerelement aus dem „Silverlight for Windows Phone 7 Toolkit“ ist das WrapPanel. Mit diesem Element können Inhalte horizontal und vertikal angeordnet werden. Ein DataBinding ist ebenfalls möglich, wie folgendes Code-Beispiel zeigt:

XAML Code

<phone:PhoneApplicationPage
  ...
  xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
  ...>
  <ItemsControl x:Name="SubjectListBox" ItemsSource="{Binding}">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <toolkit:WrapPanel ItemHeight="193" ItemWidth="193"  Height="Auto" />
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <Border Margin="0,0,20,20" Background="{StaticResource PhoneAccentBrush}">
          <Grid>
            <Rectangle Width="100" Height="100" Fill="White">
              <Rectangle.OpacityMask>
                <ImageBrush ImageSource="{Binding ImagePath}" />
              </Rectangle.OpacityMask>
            </Rectangle>
            <TextBlock Text="{Binding Name}" 
                       Foreground="White"
                       VerticalAlignment="Bottom" 
                       TextAlignment="Left" 
                       Margin="5,0,0,5" />
          </Grid>
        </Border>
      </DataTemplate>
    </ItemsControl.ItemTemplate>
  </ItemsControl>
...
</phone:PhoneApplicationPage>

Vielen Dank an den Beitrag: Bind items to a WrapPanel.

Möchte man wissen, welches Item angeklickt wurde, so muss man das umschließende Border-Element erweitern:

XAML

<Border ... Tag="{Binding}" Tap="Border_Tap">
  ...
</Border>

Code-Behind

private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
  YourClass SelectedItem = (e.OriginalSource as FrameworkElement).DataContext as YourClass;
  MessageBox.Show(SelectedItem.Name);
}

Schreibe einen Kommentar Antworten abbrechen