DataTemplate中的条件呈现

时间:2013-09-12 17:03:07

标签: c# xaml windows-phone-8

我正在关注Channel9上的Absolute Beginners Series,我们已经被告知要实现一些系列中未提供的功能,这对于学习其他内容来说是一个挑战。

我们拥有DataTemplate用于构建一些" tile"类控件,我们在LongListSelector中使用它们。

我需要做的是为这些图块添加一个上下文菜单,以对它们执行一些额外的操作。

现在,其中一个操作必须仅在某种类型的图块上执行,具体取决于绑定到LongListSelector的集合。

这是页面代码:

<phone:PhoneApplicationPage
    x:Class="SoundBoard.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    mc:Ignorable="d"
    d:DataContext="{d:DesignData SampleData/SampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="SoundTileDataTemplate">            
            <Grid Name="TileGrid" Background="{StaticResource PhoneAccentBrush}" Margin="0,0,12,12">
                <toolkit:ContextMenuService.ContextMenu>
                    <toolkit:ContextMenu>
                        <toolkit:MenuItem Header="{Binding Path=LocalizedResources.PinToStartMessage, Source={StaticResource LocalizedStrings}}"/>
                        <toolkit:MenuItem IsEnabled="False" Header="{Binding Path=LocalizedResources.DeleteSoundMessage, Source={StaticResource LocalizedStrings}}"/>
                    </toolkit:ContextMenu>
                </toolkit:ContextMenuService.ContextMenu>
                <Grid VerticalAlignment="Top" HorizontalAlignment="Right" Width="40" Height="40" Margin="0,6,6,0">
                    <Ellipse Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3"/>
                    <Image Source="/Assets/AppBar/Play.png"></Image>
                </Grid>
                <StackPanel VerticalAlignment="Bottom">
                    <TextBlock Text="{Binding Title}" Margin="6,0,0,6"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <MediaElement Name="AudioPlayer" Volume="1"/>

        <phone:Pivot Title="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}">
            <phone:PivotItem Header="{Binding Animals.Title}">    
                <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Animals.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
                </phone:LongListSelector>
            </phone:PivotItem>

            <phone:PivotItem Header="{Binding Cartoons.Title}">

                <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Cartoons.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
                </phone:LongListSelector>
            </phone:PivotItem>

            <phone:PivotItem Header="{Binding Taunts.Title}">
                <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Taunts.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
                </phone:LongListSelector>
            </phone:PivotItem>

            <phone:PivotItem Header="{Binding Warnings.Title}">               
                <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Warnings.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
                </phone:LongListSelector>
            </phone:PivotItem>

            <phone:PivotItem Header="{Binding CustomSounds.Title}">                
                <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding CustomSounds.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
                </phone:LongListSelector>
            </phone:PivotItem>
        </phone:Pivot>

    </Grid>

</phone:PhoneApplicationPage>

现在,我需要做的是仅在最后一个Toolkit:MenuItem加载控件时启用第二个LongListSelector

是否可以在项IsEnabled中编写一个布尔表达式,如果DataTemplate的项目具有CustomSounds类型或者我需要写入,则返回true两个不同的DataTemplate来处理这种情况?

编辑: 我改变了一些代码

<phone:PhoneApplicationPage
x:Name="SBMainPage"
...
    <toolkit:MenuItem IsEnabled="{Binding Path=IsDeleteEnabled, ElementName=SBMainPage}" Header="{Binding Path=LocalizedResources.DeleteSoundMessage, Source={StaticResource LocalizedStrings}}" Tap="DeleteSoundHandler"/>

但是现在IsDeleteEnabled属性返回的布尔值永远不会更新,因此在第一次读取属性时会给出false并且它永远不会更改它!

2 个答案:

答案 0 :(得分:0)

转换器可以执行您想要的操作:

class TypeToBoolConverter :IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return value.GetType() == typeof(CustomSounds);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

您可以使用:

<toolkit:MenuItem IsEnabled="{Binding ,Converter={StaticResource myTypeConverter}}" ...

答案 1 :(得分:0)

验证IsDeleteEnabled是否遵守INotifyPropertyChanged。坦率地说,这就是我通过在模型视图上添加状态标志boolean并通过绑定来挂接页面逻辑来完成的工作。