UWP在MasterView中更改ListView DataTemplate的样式 [英] UWP change style of ListView DataTemplate in a MasterView

查看:119
本文介绍了UWP在MasterView中更改ListView DataTemplate的样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是XAML的结构:

    <controls:MasterDetailsView
        ItemsSource="{x:Bind Artists}">
        <controls:MasterDetailsView.MasterHeader>
            // Some Code
        </controls:MasterDetailsView.MasterHeader>
        <controls:MasterDetailsView.ItemTemplate>
            // Some Code
        </controls:MasterDetailsView.ItemTemplate>
        <controls:MasterDetailsView.DetailsTemplate>
            <DataTemplate x:DataType="data:ArtistView">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <RelativePanel HorizontalAlignment="Stretch">
                        // Some Code
                    </RelativePanel>
                    <ListView
                        x:Name="AlbumsListView"
                        Grid.Row="1"
                        HorizontalAlignment="Stretch"
                        ItemsSource="{x:Bind Albums}"
                        SelectionMode="None">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="data:AlbumView">
                                <Grid Margin="10,0,0,30">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <RelativePanel>
                                        // Some Code
                                    </RelativePanel>
                                    <ListView
                                        x:Name="SongsListView"
                                        Grid.Row="1"
                                        HorizontalAlignment="Stretch"
                                        ContainerContentChanging="SongsListView_ContainerContentChanging"
                                        IsItemClickEnabled="True"
                                        ItemClick="SongsListView_ItemClick"
                                        ItemsSource="{x:Bind Songs}"
                                        SelectionMode="Single">
                                        <ListView.ItemTemplate>
                                            <DataTemplate x:DataType="local:Music">
                                                // Some Code
                                            </DataTemplate>
                                        </ListView.ItemTemplate>
                                    </ListView>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </DataTemplate>
        </controls:MasterDetailsView.DetailsTemplate>
    </controls:MasterDetailsView>

我试图通过更改前景突出显示正在播放音乐的SongsListView(位于另一个列表视图中)的项目.我在ContainerContentChanging中实现了它,但是仅在重新加载页面后才会更改前景.我希望它可以实时更新.我该怎么办?

I am trying to highlight an item of SongsListView (it's inside another listview) whose music is playing by changing the foreground. I implemented it in the ContainerContentChanging but the foreground will only be changed after reload the page. I want it to be updated in real time. How can I do that?

我注册了一个MusicSwitching事件,该事件将在更改当前播放的音乐时发生,以便可以将已播放的项目的前景设置为黑色,并将要播放的项目的前景设置为突出显示颜色

I registered a MusicSwitching event which will take place when the current playing music is changed, so that I can set the foreground of the item that has been played to black, and the foreground of the item to be played to a highlight color.

    public async void MusicSwitching(Music current, Music next)
    {
        await Dispatcher.RunAsync(CoreDispatcherPriority.High, () =>
        {
            var item = ArtistMasterDetailsView.Items.First((a) => (a as ArtistView).Name == next.Artist);
            var container = ArtistMasterDetailsView.ContainerFromItem(item);
        });
    }

我首先可以正确找到该物品,但是容器为空.为什么?我以为是包含该项目的DataTemplate.

I can first find the item correctly, but the container is null. Why? I thought it is the DataTemplate that contains the item.

推荐答案

如果要突出显示SongsListView的项,简单的方法是设置一个属性(我看到您已经设置了IsPlaying方法,将其更改为音乐类中的属性以绑定到要突出显示的项目中的控件.关于绑定,您可以参考此文档.

If you want to highlight an item of SongsListView,the simple way is to set a property(I saw you have set a IsPlaying method,I changed it to a property) in Music class to bind to the control in item you want to hightlight.About Binding,you can refer to this document.

首先,您应该让 Music 类从 INotifyPropertyChanged 继承来监听属性更改通知.

First, you should let the Music class inherits from INotifyPropertyChanged to listen property change notifications.

public class Music : IComparable<Music>, INotifyPropertyChanged
    {
        ......
        public event PropertyChangedEventHandler PropertyChanged = delegate { };
        public bool IsPlaying {

            set { 
                IsMusicPlaying = value;
                OnPropertyChanged();
            }
            get {
                return IsMusicPlaying;
            }
        }

        public void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            // Raise the PropertyChanged event, passing the name of the property whose value has changed.
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

然后,将该属性绑定到要突出显示的项目中的控件.

Then,bind the property to the control in item you want to highlight.

<Page.Resources>
        <local:ColorConvert x:Name="MyConvert"></local:ColorConvert>
</Page.Resources>
<FontIcon
         x:Name="PlayingIcon"
         Margin="0,0,16,0"
         FontFamily="Segoe MDL2 Assets"
         Foreground="{StaticResource SystemColorHighlightColor}"
         Glyph="&#xE767;"
         RelativePanel.AlignLeftWithPanel="True"
         Visibility="{Binding Name, Converter={StaticResource MusicVisibilityConverter}}" />
<TextBlock
         x:Name="MusicNameTextBlcok"
         Grid.Column="1"
         Width="720"
         Text="{x:Bind Name}" 
         Foreground="{x:Bind IsPlaying,Converter={StaticResource MyConvert},Mode=OneWay}"/>

.cs

public class ColorConvert : IValueConverter
    {
        // this does not include sublevel menus right now
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            if (value.ToString() == "False")
            {
                return Helper.BlackBrush;
            }
            else
            {
                return Helper.GetHighlightBrush();
            }

        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException(); 
        }
    }

最后,当触发MusicSwitching时,您可以重置IsPlaying属性.在这种情况下,前景也会一起改变.

Finally,when the MusicSwitching is triggered,you can reset IsPlaying property.In this case,the foreground will also change together.

这篇关于UWP在MasterView中更改ListView DataTemplate的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆