使用我的模型的UWP AutoSuggestionBox搜索实用工具

时间:2018-09-20 19:23:50

标签: search uwp

我目前正在设计一个带有库的媒体播放器的项目。该方法的代码发布了,我想要实现的是使用 AutoSuggestionBox 来搜索我的库< strong> GridView 项,然后查询其中一首歌曲并在 GridView

中突出显示

这是我的图书馆代码

private ObservableCollection<MusicLib> MusicList = new ObservableCollection<MusicLib>();
private StackPanel CurrentTarget;
private string content;

public Browsing()
{

    this.InitializeComponent();


}

private async void btn_Add_Click(object sender, RoutedEventArgs e)
{


    //Create a new picker
    var filePicker = new Windows.Storage.Pickers.FileOpenPicker();

    //Add filetype filters. 

    filePicker.FileTypeFilter.Add(".mp3");
    filePicker.FileTypeFilter.Add(".wav");


    //Set picker start location to the video library
    filePicker.SuggestedStartLocation = PickerLocationId.MusicLibrary;







    var files = await filePicker.PickMultipleFilesAsync();



    foreach (var file in files)
    {
        StorageItemThumbnail currentThumb = await file.GetThumbnailAsync(ThumbnailMode.MusicView, 200, ThumbnailOptions.UseCurrentScale);
        var albumCover = new BitmapImage();
        albumCover.SetSource(currentThumb);

        var musicProperties = await file.Properties.GetMusicPropertiesAsync();
        var musicname = musicProperties.Title;
        var musicdur = musicProperties.Duration;

        var artist = musicProperties.Artist;
        if (artist == "")
        {
            artist = "Unkown";
        }

        var album = musicProperties.Album;
        if (album == "")
        {
            album = "Unkown";
        }
        MusicList.Add(new MusicLib
        {
            FileName = musicname,
            Artist = artist,
            Album = album,
            Duration = musicdur,
            AlbumCover = albumCover,
            MusicPath = file.Path
        });

    }
}

这是我的删除曲目的上下文菜单(这是一个进行中的工作,很可能缺少一些愚蠢的东西)

private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    GridView listView = (GridView)sender;
    allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
    var a = ((FrameworkElement)e.OriginalSource).DataContext as MusicList;
    content = a.text;
}

private void Remove_Click(object sender, RoutedEventArgs e)
{
    foreach (var item in MusicList.ToList())
    {
        if (item.text == content)
        {
            MusicList.Remove(item);
        }
    }
    content = "";
}

Xaml

<Grid Background="White" Name="MyGrid">

            <AutoSuggestBox Name="Search" />
    <GridView RightTapped="ListView_RightTapped"  Name="mylist" ItemsSource="{x:Bind MusicList}" Margin="0,37,0,0">

        <GridView.ItemTemplate>
            <DataTemplate>

                <StackPanel>
                    <StackPanel  Name="Stacky" PointerEntered="myList_PointerEntered" Orientation="Horizontal">
                        <Image MaxWidth="100" MaxHeight="100" Source="{Binding AlbumCover}"/>
                    </StackPanel>
                    <StackPanel  >
                        <TextBlock Text="{Binding FileName}" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Artist}" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Album}" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Duration}" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding FileName}" />
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.Resources>
            <MenuFlyout x:Name="allContactsMenuFlyout">
                <MenuFlyout.Items>
                    <MenuFlyoutItem x:Name="Edit"  Text="Edit" />
                    <MenuFlyoutItem x:Name="Remove" Text="Remove"    Click="Remove_Click" />
                </MenuFlyout.Items>
            </MenuFlyout>
        </GridView.Resources>
    </GridView>

模型

namespace Mp3Player
{
    class MusicLib
    {
        public string FileName { get; set; }
        public string Artist { get; set; }
        public string Album { get; set; }
        public TimeSpan Duration { get; set; }
        public string MusicPath { get; set; }
        public BitmapImage AlbumCover { get; set; }
    }
}

要具体解决我的问题,即尝试从我的模型中查询一个对象,以“查找”该特定轨道,例如 FileName 例如

我知道在“自动建议”框中需要使用3种方法,其中一种是查询方法。可能的例子,我将不胜感激,并将我的项目发布在GitHub上,以供将来像我这样的新手使用。

1 个答案:

答案 0 :(得分:0)

AutoSuggestBox 已被记录下来,其中包含其设计细节以及如何使用它以及其代码示例here

  

这是一个典型的AutoSuggestBox

<AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="200"
            TextChanged="AutoSuggestBox_TextChanged"
            QuerySubmitted="AutoSuggestBox_QuerySubmitted"
            SuggestionChosen="AutoSuggestBox_SuggestionChosen"/>

后端

private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    // Only get results when it was a user typing,
    // otherwise assume the value got filled in by TextMemberPath
    // or the handler for SuggestionChosen.
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        //Set the ItemsSource to be your filtered dataset
        //sender.ItemsSource = dataset;// Here you will filter your music list and only send back the data which matches with the text in your autosuggest box.

    }
}


private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
    // Set sender.Text. You can use args.SelectedItem to build your text string.
}


private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
    if (args.ChosenSuggestion != null)
    {
        // User selected an item from the suggestion list, take an action on it here.
    }
    else
    {
        // Use args.QueryText to determine what to do.
    }
}

在您的情况下,您拥有 MusicLib集合,并且需要使用 FileName 进行过滤,因此您将 DataSet 作为已过滤数据发送回去将来自您的收藏。为此,您可以使用LINQ,也可以使用简单的foreach循环。

请注意,当您继续过滤收藏夹时,如果您更改收藏夹进行过滤,则还需要保留第二个收藏夹,该收藏夹将始终包含所有音乐曲目,一旦您熟悉了基本概念,请不要犹豫探索:AdvancedCollectionView通过 WindowsCommunityToolkit 进行,它使过滤变得更加简单和强大。

好运