Question

我的问题是关于创建一个xaml页面，由系统给出图片，用户可以在图片和选择的avator之间进行选择。在“鼠标单击”操作上，所选图片必须显示在上方以显示用户选择。 Please check the image for better understanding

 <PivotItem>
                <Grid
                    Margin="0,0,0,0">
                    <!--  Security question  -->
                    <Grid.RowDefinitions>
                        <!--  Steps  -->
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBlock
                        Grid.Row="0"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        Margin="0,0,0,0"
                        HorizontalAlignment="Center"
                        Style="{StaticResource PopUpHeading1}"
                        Text="Finally, please selesct your Healthi character" />
                    <!--  First security question stackpanel  -->
                    <Button>
                        <Image
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        Height="226"
                        Margin="111,50,0,0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Source="{StaticResource ProfilePicture}" Grid.RowSpan="2" />
                    </Button>

                    <StackPanel Orientation="Horizontal"
                                Grid.Row="2"
                                Grid.Column="1"
                                HorizontalAlignment="Left">
                        <Button>
                            <Image
                                Height="67"
                                Source="{StaticResource ProfilePicture}">
                            </Image>
                        </Button>
                        <Button Background="Transparent">
                            <Image
                            Height="67"
                                    Source="{StaticResource ProfilePicture0}">
                            </Image>
                        </Button>
                        <Image
                        Height="82"
                                    Source="{StaticResource ProfilePicture1}">
                        </Image>
                        <Image
                        Height="67"
                                    Source="{StaticResource ProfilePicture2}">
                        </Image>
                        <Image
                        Height="67"
                                    Source="{StaticResource ProfilePicture3}">
                        </Image>
                    </StackPanel>
                </Grid>
            </PivotItem>

Answer 1

您需要使用FileOpenPicker类从文件夹中选择图片。例如，您可以像上面文档中的示例一样，从系统的PicturesLibrary中选择图片。

然后，您将获得图片的StorageFile类对象。之后，您可以调用其GetScaledImageAsThumbnailAsync以获取缩放图像作为缩略图。您可以检查File and folder thumbnail sample以供参考。

最后，您可以使用Image控件显示缩略图。

Xaml页面从系统中选择个人资料图片

1 个答案: