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

时间:2019-02-14 16:10:04

标签: c# uwp parameter-passing parent-child uwp-xaml

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

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

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

我确实找到了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));
    }
}

1 个答案:

答案 0 :(得分: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
}