代码之家 › 专栏 › 技术社区 › Keven M

将图像选择从子窗口传递到主页面

uwp-xaml parent-child parameter-passing uwp c#

Keven M · 技术社区 · 7 年前

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

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

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

我确实发现 this

有人知道怎么做吗?代码(相关部分)粘贴如下:

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

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

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));
    }
}

0 回复 | 直到 7 年前

Martin Zikmund 7 年前

在这种情况下,您可以将结果作为 public 财产 IconSelector EventArgs 一个事件。你已经有了 SelectedIcon 所以你可以用它。通知 MainPage 如果选择已发生,则需要将事件添加到 图标选择器 -例如 DialogCompleted :

public event EventHandler<int> DialogCompleted;

当用户确认对话框时,将触发此事件:

DialogCompleted?.Invoke(this, SelectedIcon);

然后在里面 ,您需要订阅此事件:

IconSelector selector = new IconSelector();

selector.DialogCompleted += IconDialogCompleted;

ShowDialog(selector);

现在去拿 选择指令 在处理器内部:

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