如何控制 MasterDetailsView 中主项目内视图的可见性

Question

我正在寻找一种方法来处理 MasterDetailsView 列表中嵌套项的可见性。有没有一种方法可以使用我创建的 ShowButton 布尔值来控制我的 MasterDetailsView 中使用的列表项中的项目（更多按钮 - 带有省略号）的可见性？在这种情况下我需要使用依赖属性还是应该使用其他东西？

预期结果

当前结果

XAML

<Page
    x:Class="MD.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MD"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <controls:MasterDetailsView x:Name="MyMasterDetailsView"
                                    BackButtonBehavior="Automatic" 
                                    ItemsSource="{x:Bind Emails}"
                                    NoSelectionContent="Select an item to view"
                                    CompactModeThresholdWidth="720">
            <controls:MasterDetailsView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.Column="0" Margin="0,8">
                            <TextBlock Text="{Binding From}" 
                                   Style="{ThemeResource SubtitleTextBlockStyle}"/>
                            <TextBlock Text="{Binding Body}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" 
                                   Opacity=".6"/>
                        </StackPanel>

                        <Button Grid.Column="1" 
                                x:Name="MoreBtn" 
                                Background="Transparent" 
                                Content="&#xE712;" 
                                FontFamily="Segoe MDL2 Assets"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Margin="10" 
                                Padding="10" 
                                Click="MoreBtn_Click"/>
                    </Grid>
                </DataTemplate>
            </controls:MasterDetailsView.ItemTemplate>
            <controls:MasterDetailsView.DetailsTemplate>
                <DataTemplate>
                    <RelativePanel Margin="24">
                        <TextBlock Text="{Binding From}" 
                                   Style="{ThemeResource SubtitleTextBlockStyle}" 
                                   Margin="12,-6,0,0"/>
                        <TextBlock x:Name="Body" 
                                   Text="{Binding Body}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" 
                                   TextWrapping="Wrap" 
                                   Margin="0,12,0,0"/>
                    </RelativePanel>
                </DataTemplate>
            </controls:MasterDetailsView.DetailsTemplate>
            <controls:MasterDetailsView.NoSelectionContentTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Center" 
                                VerticalAlignment="Center">
                        <SymbolIcon Symbol="Mail" 
                                    RenderTransformOrigin=".5,.5">
                            <SymbolIcon.RenderTransform>
                                <CompositeTransform 
                                  ScaleX="2" 
                                  ScaleY="2"/>
                            </SymbolIcon.RenderTransform>
                        </SymbolIcon>
                        <TextBlock Text="{Binding}" 
                                   FontSize="24" 
                                   Margin="0,12"/>
                    </StackPanel>
                </DataTemplate>
            </controls:MasterDetailsView.NoSelectionContentTemplate>
            <controls:MasterDetailsView.MasterCommandBar>
                <CommandBar>
                    <AppBarButton Icon="Back" Label="Back"/>
                    <AppBarButton Icon="Forward" Label="Forward"/>

                    <CommandBar.Content>
                        <TextBlock Margin="12,14">
              <Run Text="{Binding Emails.Count}" />
              <Run Text="Items" />
                        </TextBlock>
                    </CommandBar.Content>
                </CommandBar>
            </controls:MasterDetailsView.MasterCommandBar>
            <controls:MasterDetailsView.DetailsCommandBar>
                <CommandBar>
                    <AppBarButton Icon="MailReply" Label="Reply" />
                    <AppBarButton Icon="MailReplyAll" Label="Reply All" />
                    <AppBarButton Icon="MailForward" Label="Forward" />
                </CommandBar>
            </controls:MasterDetailsView.DetailsCommandBar>
        </controls:MasterDetailsView>
    </Grid>
</Page>

项目class（电子邮件）

public class Email
{
    public string From { get; set; }
    public string Body { get; set; }
    public bool ShowButton { get; set; }
}

public class MyEmailManager
{
    public static List<Email> GetEmails()
    {
        var MyEmails = new List<Email>
        {
            new Email
            {
                From = "Steve Johnson",
                Body = "Are you available for lunch tomorrow? A client would like to discuss a project with you.",
                ShowButton = true
            },
            new Email
            {
                From = "Pete Davidson",
                Body = "Don't forget the kids have their soccer game this Friday. We have to supply end of game snacks.",
                ShowButton = false
            },
            new Email
            {
                From = "OneDrive",
                Body = "Your new album.\r\nYou uploaded some photos to your OneDrive and automatically created an album for you.",
                ShowButton = false
            },
            new Email
            {
                From = "Twitter",
                Body = "Here are some people we think you might like to follow:\r\n.@randomPerson\r\nAPersonYouMightKnow",
                ShowButton = true
            }
        };

        return MyEmails;
    }
}

Answer 1

Would I need to use dependency properties in this case or should something else be used?

在这种情况下您不需要使用依赖属性，您可以将 MoreBtn 的 Visibility 直接绑定到 ShowButton 属性。

<Button Grid.Column="1" 
        x:Name="MoreBtn" 
        Background="Transparent" 
        Content="&#xE712;" 
        Visibility="{Binding ShowButton}"
        FontFamily="Segoe MDL2 Assets"
        HorizontalAlignment="Right"
        VerticalAlignment="Top"
        Margin="10" 
        Padding="10" 
        Click="MoreBtn_Click"/>

Starting in Windows 10, version 1607, the XAML framework provides a built in boolean to Visibility converter. The converter maps true to the Visible enumeration value and false to Collapsed so you can bind a Visibility property to a boolean without creating a converter. To use the built in converter, your app's minimum target SDK version must be 14393 or later. You can't use it when your app targets earlier versions of Windows 10. For more info about target versions, see Version adaptive code.

对于以前的版本，我们可以使用 BoolToVisibilityConverter to convert bool to visibility (install Microsoft.Toolkit.Uwp.UI nuget 包。

用法

<Page
    x:Class="MasterDetailViewTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:MasterDetailViewTest"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d"
    >

<Page.Resources>
    <converters:BoolToVisibilityConverter x:Key="MyConveter" />
</Page.Resources>

......

<Button
    x:Name="MoreBtn"
    Grid.Column="1"
    Margin="10"
    Padding="10"
    HorizontalAlignment="Right"
    VerticalAlignment="Top"
    Background="Transparent"
    Click="MoreBtn_Click"
    Content="&#xE712;"
    FontFamily="Segoe MDL2 Assets"
    Visibility="{Binding ShowButton, Converter={StaticResource MyConveter}}"
    />

如何控制 MasterDetailsView 中主项目内视图的可见性

How to control visibility of view inside Master items in MasterDetailsView

c#

xaml

windows-10

uwp

uwp-xaml