将图像选择从 child window 传递到 MainPage
Passing image selection from child window to MainPage
我正在开发 UWP FTP front-end 应用程序。我创建了一个模仿标准 Windows 桌面图标形式的 UserControl（由包含一个图像和一个 TextBlock 的 StackPanel 组成），用作显示保存的收藏夹的一种方式。我希望用户能够 select 任何图像用作每个收藏夹的图标，但 运行 遇到一些非常重要的问题才能让它工作，我相信由于 Windows 10 "no access to filesystem" 限制——我还没有弄清楚那部分。
作为临时替代，我想到了为用户提供一组图标的想法 select，所有图标都存储在应用程序的资产文件夹中。我创建了一个 IconSelector page/child window (IconSelector.xaml)，它会在适当的时候弹出，允许用户从 8 个不同的图像中 select。
我 运行 正在解决的问题是将 selected 图像返回到 parent window (MainPage.xaml)。我想过将一个 int 从 child 传递到 parent，然后将该 int 与枚举一起使用以指示正确的图像，但我无法弄清楚如何在 child 和 parent.
我确实在 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>
主页 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);
//}
}
图标选择器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));
}
}
在这种情况下，您可以将结果作为 IconSelector class 的 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
}
我正在开发 UWP FTP front-end 应用程序。我创建了一个模仿标准 Windows 桌面图标形式的 UserControl（由包含一个图像和一个 TextBlock 的 StackPanel 组成），用作显示保存的收藏夹的一种方式。我希望用户能够 select 任何图像用作每个收藏夹的图标，但 运行 遇到一些非常重要的问题才能让它工作，我相信由于 Windows 10 "no access to filesystem" 限制——我还没有弄清楚那部分。
作为临时替代，我想到了为用户提供一组图标的想法 select，所有图标都存储在应用程序的资产文件夹中。我创建了一个 IconSelector page/child window (IconSelector.xaml)，它会在适当的时候弹出，允许用户从 8 个不同的图像中 select。
我 运行 正在解决的问题是将 selected 图像返回到 parent window (MainPage.xaml)。我想过将一个 int 从 child 传递到 parent，然后将该 int 与枚举一起使用以指示正确的图像，但我无法弄清楚如何在 child 和 parent.
我确实在 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>
主页 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);
//}
}
图标选择器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));
}
}
在这种情况下，您可以将结果作为 IconSelector class 的 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
}