Question

编辑：哦，我的。我在更改代码之前忘了提交，遗憾的是程序运行不正常。我将尝试描述当前显示的内容以及我希望完成的内容。我目前拥有的是名为SelectScreenShots的WPF窗口。当窗口加载时，它会截取与程序关联的所有活动窗口的屏幕截图并将它们呈现为位图，它会加载项目控件，显示两列包含所有图像，一列包含按钮。

当用户点击其中一个图像时，我希望该图像仅在放大的同一窗口中显示。窗口顶部有一个后退按钮，当用户点击后退按钮时，我希望它返回显示所有图像的列表。

我对WPF缺乏经验。我只做了非常简单的图形用户界面，但我正在努力扩展我的知识。我正在尝试构建一个GUI，显示应用程序中的所有活动窗口，并允许用户单击列表中的图像以显示大图像。我被告知我需要使用UserControl和ContentPresenter完成此操作，但我不明白这两者是如何相互关联以及如何将我的图像列表绑定到{{1} }。

最初我使用的是UserControl。 xaml如下：

ItemsControl

我将代码列表绑定到我后面代码中的_image。

我假设我需要使用此<ItemsControl Name="_itemsControl"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid Name="_imageGrid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="550"/> <ColumnDefinition Width="250"/> </Grid.ColumnDefinitions> <Image Name="_image" Grid.Column="0" Height="400" Width="550" HorizontalAlignment="Center" VerticalAlignment ="Center" Stretch="Uniform" Source="{Binding ''}" MouseLeftButtonUp="Image_MouseLeftButtonUp"/> <Grid Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Button Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Bottom" Name="_addscreenshot" Click="_addscreenshot_Click" Content="Select Screenshot" Height="30" Width="150" Margin="3.5,0,3.5,7"/> <Button Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Name="_removescreenshot" Click="_removescreenshot_Click" Content="Remove Screenshot" Height="30" Width="150" Margin="3.5,0,3.5,7"/> </Grid> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>并将其转移到ItemsControl上，然后在我的主窗口的UserControl中显示UserControl。

如果这完全不正确，请原谅我。我尝试过做自己的研究但是解释非常宽泛和模糊，我认为因为UserControls本质上是广泛而模糊的，所以他们可以完成许多任务。

如果有人能指出我正确的方向，我们将不胜感激。

Answer 1

ContentPresenter的目的是在ContentControl中显示内容，例如Button类。与创建新的UserControl或使用带有ContentControl的{{1}}相反，我创建了一个继承自ContentPresenter类的自定义控件。这是我设计的一个非常基本的（即缺少MVVM和Control）解决方案。

以下代码的输出是：

enter image description here

ImageDialogue控件

Style

默认样式（在App.xaml中声明仅用于演示目的）

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace ImageControl
{
    public class ImageDialogue : Control
    {
        public ImageDialogue()
        {
            //applies the default style for the control (see ControlTemplate below)
            DefaultStyleKey = typeof (ImageDialogue);
        }

        public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.Register("ImageSource", typeof (ImageSource), typeof (ImageDialogue), new PropertyMetadata(default(ImageSource)));

        public ImageSource ImageSource
        {
            get { return (ImageSource) GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }
    }
}

<强> MainWindow.xaml

<Application.Resources>
    <ResourceDictionary>
        <!-- declaring the style and template without a key enables them to be consumed as the default style --> 
        <Style TargetType="{x:Type local:ImageDialogue}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:ImageDialogue}">
                        <Grid Background="DarkGray"
                              Height="{TemplateBinding Height}"
                              Width="{TemplateBinding Width}">
                            <Image Source="{TemplateBinding ImageSource}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Application.Resources>

MainWindow代码隐藏

<Window x:Class="ImageControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ImageControl="clr-namespace:ImageControl"
        Title="MainWindow" Height="600" Width="800">
    <Grid>
        <ItemsControl>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <Image Source="http://2.bp.blogspot.com/-WuasmTMjMA4/TY0SS4TzIMI/AAAAAAAAFB4/6alyfOzWsqM/s640/flowers-wallpapers-love-blooms-roses-bunch-of-flowers.jpg"
                   Margin="5"
                   Stretch="UniformToFill"
                   Height="200"
                   Width="200"
                   MouseUp="Image_MouseUp" />

            <Image Source="http://3.bp.blogspot.com/-0JiC3dRE-Vg/UVx_ffJogLI/AAAAAAAAC2w/SxRqMIWfBro/s1600/flowers-pics-flower-colours.jpg"
                   Margin="5"
                   Stretch="UniformToFill"
                   Height="200"
                   Width="200"
                   MouseUp="Image_MouseUp" />

            <Image Source="http://1.bp.blogspot.com/-zoLd-fBa48A/UYoQqgrBqWI/AAAAAAAAABY/aQAT7EtZvUc/s1600/flowers-13.jpg"
                   Margin="5"
                   Stretch="UniformToFill"
                   Height="200"
                   Width="200"
                   MouseUp="Image_MouseUp" />
        </ItemsControl>

        <ImageControl:ImageDialogue x:Name="ImageDialogue"
                                    Visibility="Collapsed"
                                    Height="500"
                                    Width="500"
                                    VerticalAlignment="Center"
                                    VerticalContentAlignment="Center"
                                    HorizontalAlignment="Center"
                                    HorizontalContentAlignment="Center" />
    </Grid>
</Window>

什么是UserControls和ContentPresenters以及如何使用它们来显示和更改我的内容？

1 个答案: