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

Question

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

作为临时替代，我想出了一组图标供用户选择，所有图标都存储在应用程序的 Assets 文件夹中。我创建了一个 IconSelector 页面/子窗口 (IconSelector.xaml)，它会在适当的时候弹出，允许用户从 8 个不同的图像中进行选择。

我遇到的问题是将所选图像返回到父窗口 (MainPage.xaml)。我想只是将一个 int 从子级传递给父级，然后使用该 int 和一个枚举来指示正确的图像，但我不知道如何在子级和父级之间传递任何参数。

我确实在 SO 上找到了this 问题，但它是针对 Silverlightbt 的，并且在 UWP 中似乎不起作用（除非我实施不正确）。

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

主页 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>

图标选择器 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

在这种情况下，您可以将结果作为IconSelector 类的public 属性提供，或者作为事件的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
}