将图像选择从子窗口传递到MainPage

Question

我正在开发一个UWP FTP前端应用程序。我创建了一个UserControl，它模仿标准Windows桌面图标的形式（由包含图像和TextBlock的StackPanel组成），用作显示已保存收藏夹的方式。我想要的是让用户能够选择任何图像作为每个收藏夹的图标，但是遇到了一些非常重要的问题，让它开始工作，我相信由于Windows 10“无法访问到文件系统“限制 - 我还没有弄清楚那个部分。

作为临时替换，我提出了一个让用户可以选择的图标集的想法，所有这些图标都存储在应用程序的Assets文件夹中。我创建了一个适当时弹出的IconSelector页面/子窗口（IconSelector.xaml），允许用户从8个不同的图像中进行选择。

我遇到的问题是将选定的图像恢复到父窗口（MainPage.xaml）。我想到只是将一个int从子节点传递给父节点，然后使用带有枚举的int来指示正确的图像，但我无法弄清楚如何在子节点和父节点之间传递任何参数。

我确实在SO上找到了this问题，但它适用于Silverlighbt并且似乎不适用于UWP（除非我错误地实现了它）。

有没有人知道如何做到这一点？粘贴的代码（相关部分）如下：

MainPage XAML

<Canvas Grid.Column="1" Grid.Row="0" Grid.RowSpan="5" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Image Source="Assets\Red.png" Canvas.ZIndex="200" />
    <Border x:Name="addFtpGrid" Visibility="Visible" Canvas.Left="300" Canvas.Top="300" Width="600" Height="350" BorderBrush="{ThemeResource SystemControlBackgroundAccentRevealBorderBrush}" BorderThickness="3">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1.5*" />
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="1.5*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock Text="Link name" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
            <TextBlock Text="Address" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
            <TextBlock Text="Username" Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
            <TextBlock Text="Password" Grid.Column="0" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
            <TextBlock Text="Confirm Password" Grid.Column="0" Grid.Row="4" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
            <TextBox x:Name="linkNameEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Margin="5,0" />
            <TextBox x:Name="addressEntry" Text="ftp://" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5,0" />
            <TextBox x:Name="usernameEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5,0" />
            <PasswordBox x:Name="passwordEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3" Margin="5,0">
            </PasswordBox>
            <PasswordBox x:Name="confirmPasswordEntry"  HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="4" Margin="5,0" LostFocus="ConfirmPasswordEntry_LostFocus" />
            <Viewbox Grid.Column="2" Grid.Row="0" Grid.RowSpan="4" Margin="5,15,5,0">
                <Image x:Name="imageEntry" Source="Assets/SquircleX.png" Tapped="ImageEntry_TappedAsync" />
            </Viewbox>
            <TextBlock Text="Click image to change" Grid.Column="2" Grid.Row="4" HorizontalAlignment="Center" VerticalAlignment="Center" />
            <Button x:Name="saveNewFtpLink" Click="SaveNewFtpLink_Click" Content="Save Changes" Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,10"/>
        </Grid>
    </Border>
</Canvas>

MainPage C＃

private async void ImageEntry_TappedAsync(object sender, TappedRoutedEventArgs e)
{
    IconSelector selector = new IconSelector();
    selector.Tapped += new TappedEventHandler(selector_Tapped);


    ShowDialog(selector);

    //List<string> fileTypes = new List<string> { ".jpg", ".jpeg", ".png", ".bmp", ".gif", ".tiff", ".ico" };

    //FileOpenPicker picker = new FileOpenPicker();
    //picker.ViewMode = PickerViewMode.Thumbnail;
    //picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

    //foreach (string type in fileTypes)
    //{
    //    picker.FileTypeFilter.Add(type);
    //}

    //StorageFile file = await picker.PickSingleFileAsync();
    //if(file != null)
    //{
    //    imageEntry.Source = new BitmapImage(new Uri(file.Path));
    //    Image selectedImage = new Image();
    //    selectedImage.Source = imageEntry.Source;
    //    imageEntry = selectedImage;
    //    imageEntry.UpdateLayout();

    //    imageToken = StorageApplicationPermissions.FutureAccessList.Add(file);
    //}
}

IconSelector XAML

<Page
    x:Class="FtpSharp.IconSelector"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FtpSharp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignHeight="175" d:DesignWidth="600"
    Background="{ThemeResource ContentDialogBackgroundThemeBrush}">
<Page.Resources>
    <Style x:Key="selectionStyle" TargetType="Border">
        <Setter Property="CornerRadius" Value="10" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Margin" Value="10,10,5,5" />
        <Setter Property="BorderThickness" Value="3" />
    </Style>
</Page.Resources>
<Grid VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <StackPanel x:Name="iconViewer" Orientation="Horizontal" Width="1100">
            <Border Style="{StaticResource selectionStyle}">
                <Image Source="Assets\FtpRed.png" Margin="4" Height="96" Tapped="Image_Tapped" />
            </Border>
            <Border Style="{StaticResource selectionStyle}">
                <Image Source="Assets\FtpOrange.png" Margin="4" Height="96" Tapped="Image_Tapped" />
            </Border>
            <Border Style="{StaticResource selectionStyle}">
                <Image Source="Assets\FtpYellow.png" Margin="4" Height="96" Tapped="Image_Tapped" />
            </Border>
            <Border Style="{StaticResource selectionStyle}">
                <Image Source="Assets\FtpGreen.png" Margin="4" Height="96" Tapped="Image_Tapped" />
            </Border>
            <Border Style="{StaticResource selectionStyle}">
                <Image Source="Assets\FtpBlue.png" Margin="4" Height="96" Tapped="Image_Tapped" />
            </Border>
            <Border Style="{StaticResource selectionStyle}">
                <Image Source="Assets\FtpPurple.png" Margin="4" Height="96" Tapped="Image_Tapped" />
            </Border>
            <Border Style="{StaticResource selectionStyle}">
                <Image Source="Assets\FtpPink.png" Margin="4" Height="96" Tapped="Image_Tapped" />
            </Border>
            <Border Style="{StaticResource selectionStyle}">
                <Image Source="Assets\FtpTeal.png" Margin="4" Height="96" Tapped="Image_Tapped" />
            </Border>
        </StackPanel>
    </ScrollViewer>
    <Button x:Name="commitSelection" Content="Save" Grid.Row="1" Foreground="Black" HorizontalAlignment="Center" Margin="0,10" />
</Grid>

IconSelector C＃

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace FtpSharp
{
public sealed partial class IconSelector : Page
{
    private static readonly DependencyProperty SelectedIconProperty = DependencyProperty.Register("SelectedIcon", typeof(int),
        typeof(IconSelector), new PropertyMetadata(0));

    public int SelectedIcon
    {
        get { return (int)GetValue(SelectedIconProperty); }
        set { SetValue(SelectedIconProperty, value); }
    }

    public IconSelector()
    {
        this.InitializeComponent();
    }

    private void Image_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        Image tappedImage = (Image)sender;
        Border tappedBorder = (Border)tappedImage.Parent;
        SolidColorBrush blue = new SolidColorBrush(Colors.Blue);

        foreach (Border border in iconViewer.Children)
        {
            border.BorderBrush = new SolidColorBrush(Colors.Transparent);
        }

        tappedBorder.BorderBrush = new SolidColorBrush(Color.FromArgb(255,0,0,255));
    }
}

Answer 1

在这种情况下，您可以将结果作为public类的IconSelector属性提供，或者作为事件的EventArgs提供。您已经拥有SelectedIcon属性，因此您可以使用它。要通知MainPage选择已经发生，您需要向IconSelector添加一个事件 - 例如DialogCompleted：

public event EventHandler<int> DialogCompleted;

当用户确认对话框时，您将触发此事件：

DialogCompleted?.Invoke(this, SelectedIcon);

然后在MainPage内，您需要订阅此活动：

IconSelector selector = new IconSelector();

selector.DialogCompleted += IconDialogCompleted;

ShowDialog(selector);

现在在处理程序中获取SelectedIcon：

private void IconDialogCompleted(object sender, int selectedIcon)
{
    //do something with selectedIcon
}