使用组合框过滤 xaml gridview

Question

我刚开始开发 Windows 8 应用程序，我希望能够使用组合框中的选定值过滤网格视图

我的 xaml 页面代码在后面

public sealed partial class MainPage : Page
{
    public ObservableCollection<Recording> MyMusic = new ObservableCollection<Recording>();

    public MainPage()
    {
        this.InitializeComponent();
        // Add items to the collection.
        MyMusic.Add(new Recording("Chris Sells", "Chris Sells Live",
            new DateTime(2008, 2, 5)));
        MyMusic.Add(new Recording("Luka Abrus",
            "The Road to Redmond", new DateTime(2007, 4, 3)));
        MyMusic.Add(new Recording("Jim Hance",
            "The Best of Jim Hance", new DateTime(2007, 2, 6)));

        // Set the data context for the combo box.
        //ComboBox1.DataContext = MyMusic;
        this.DataContext = new CollectionViewSource { Source = MyMusic };
    }


}

类

public class Recording
{
    public Recording() { }

    public Recording(string artistName, string cdName, DateTime release)
    {
        Artist = artistName;
        Name = cdName;
        ReleaseDate = release;
    }

    public string Artist { get; set; }
    public string Name { get; set; }
    public DateTime ReleaseDate { get; set; }

    // Override the ToString method.
    public override string ToString()
    {
        return Name + " by " + Artist + ", Released: " + ReleaseDate.ToString("d");
    }
}

Xaml 标记

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ComboBox x:Name="ComboBox1" HorizontalAlignment="Left" Margin="542,108,0,0" VerticalAlignment="Top" Width="360" ItemsSource="{Binding}">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="2">
                    <TextBlock Text="Artist:" Margin="2" />
                    <TextBlock Text="{Binding Artist}" Margin="2" />
                    <TextBlock Text="CD:" Margin="10,2,0,2" />
                    <TextBlock Text="{Binding Name}" Margin="2" />
                </StackPanel>
            </DataTemplate>

        </ComboBox.ItemTemplate>

    </ComboBox>
    <!--<StackPanel x:Name="RecordingDetails" Margin="542,150,10,30">
        <TextBlock Text="{Binding Artist}" FontWeight="Bold" FontSize="30" />
        <TextBlock Text="{Binding Name}" FontStyle="Italic" FontSize="30" />
        <TextBlock Text="{Binding ReleaseDate}" FontSize="30" />
    </StackPanel>-->
    <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemGridView"
        AutomationProperties.Name="Grouped Items"
        Grid.RowSpan="2"
        Padding="116,137,40,46"
        ItemsSource="{Binding}"
        SelectionMode="None"
        IsSwipeEnabled="false" >
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Left" Width="250" Height="250">
                    <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}" Name="test">
                        <TextBlock Text="{Binding Artist}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
                        <TextBlock Text="{Binding Name}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                        <TextBlock Text="{Binding ReleaseDate}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid GroupPadding="0,0,70,0"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

所以基本上我只需要使用选择的组合框值动态过滤gridview。

感谢您的帮助和指导。

Answer 1

这是一个 msdn 示例。

您可以参考this msdn page link了解更多详情。

用户控制

<UserControl x:Class="TestDataBindingQS.Page2"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="using:TestDataBindingQS"
  mc:Ignorable="d"
  d:DesignHeight="768" d:DesignWidth="1366">

  <UserControl.Resources>
    <local:StringFormatter x:Key="StringConverter"/>
  </UserControl.Resources>

  <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">

    <StackPanel Width="750" Height="200"
      VerticalAlignment="Center" HorizontalAlignment="Center">

      <ComboBox x:Name="ComboBox1" ItemsSource="{Binding}" 
        Foreground="Black" FontSize="30" Height="50" Width="750">
        <ComboBox.ItemTemplate>
          <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="2">
              <TextBlock Text="Artist:" Margin="2" />
              <TextBlock Text="{Binding Artist}" Margin="2" />
              <TextBlock Text="CD:" Margin="10,2,0,2" />
              <TextBlock Text="{Binding Name}" Margin="2" />
            </StackPanel>
          </DataTemplate>
        </ComboBox.ItemTemplate>
      </ComboBox>

      <!--The UI for the details view-->
      <StackPanel x:Name="RecordingDetails">
        <TextBlock Text="{Binding Artist}" FontSize="30" FontWeight="Bold" />
        <TextBlock Text="{Binding Name}" FontSize="30" FontStyle="Italic" />
        <TextBlock Text="{Binding ReleaseDate,
          Converter={StaticResource StringConverter},
          ConverterParameter=Released: \{0:d\}}" FontSize="30"  />
      </StackPanel>

    </StackPanel>

  </Grid>

</UserControl>

转换器类

public class StringFormatter : IValueConverter
{
    // This converts the value object to the string to display.
    // This will work with most simple types.
    public object Convert(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        // Retrieve the format string and use it to format the value.
        string formatString = parameter as string;
        if (!string.IsNullOrEmpty(formatString))
        {
            return string.Format(culture, formatString, value);
        }

        // If the format string is null or empty, simply
        // call ToString() on the value.
        return value.ToString();
    }

    // No need to implement converting back on a one-way binding
    public object ConvertBack(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

这会产生以下输出