Question

我制作了一个应用程序，可以从视频设备流式传输视频，并添加了截取视频屏幕截图的功能，当捕获时，它会显示在ItemsControl中，其余部分都会被捕获。

我的问题是如何制作每个项目＆＃34; image＆＃34; ItemsControl中显示可点击，以便我可以预览吗？

我将图像详细信息存储在列表中：

List<ImageDetails> images = new List<ImageDetails>();

这是ItemsControl的Xaml代码：

编辑：我将所有内容都包含在datatemplate内的按钮模板中，然后我在按钮上调用了一个mousebuttonclickup事件，但没有任何反应。我错了按钮模板了吗？

 <ItemsControl Name="ImageList" ItemsSource="{Binding ImageList}" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Width="auto" Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseLeftButtonUp="Button_MouseLeftButtonUp">
                        <Button.Template>
                            <ControlTemplate>
                                <Border x:Name="imagecanv" BorderThickness="1" BorderBrush="#FFD0D1D7" Padding="5" Margin="5,5,0,0" MouseLeftButtonUp="imagecanv_MouseLeftButtonUp">
                                    <StackPanel Orientation="Horizontal">
                                        <!--image and dimensions-->
                                        <Grid x:Name="picgrid" Width="88" Height="55">
                                            <Image x:Name="imgcontainer"  Source="{Binding Path}" MouseLeftButtonUp="imgcontainer_MouseLeftButtonUp"/>
                                            <TextBlock Background="#B2000000" Foreground="White" Height="16" TextAlignment="Center" VerticalAlignment="Bottom">
                                                <TextBlock.Text>
                                                    <MultiBinding StringFormat="{}{0}x{1}">
                                                        <Binding Path="Height"/>
                                                        <Binding Path="Width"/>
                                                    </MultiBinding>
                                                </TextBlock.Text>
                                            </TextBlock>
                                        </Grid>
                                        <!--name, type and size-->
                                        <StackPanel Orientation="Vertical" Margin="5,0,0,0" VerticalAlignment="Center">
                                            <TextBlock Name="ImageName" Margin="1" Foreground="#FF787878" Text="{Binding FileName}"/>
                                            <TextBlock Name="ImageType" Margin="1" Foreground="#FF787878">
                                                <TextBlock.Text>
                                                    <MultiBinding StringFormat="Type: {0}">
                                                        <Binding Path="Extension"/>
                                                    </MultiBinding>
                                                </TextBlock.Text>
                                            </TextBlock>
                                            <TextBlock Name="ImageSize" Margin="1" Foreground="#FF787878">
                                                <TextBlock.Text>
                                                    <MultiBinding StringFormat="Size: {0} Bytes">
                                                        <Binding Path="Size"/>
                                                    </MultiBinding>
                                                </TextBlock.Text>
                                            </TextBlock>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                                </ControlTemplate>
                                    </Button.Template>
                                        </Button>
                                     </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>                   
                <ItemsPanelTemplate >                       
                    <StackPanel x:Name="stackeditems" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.Template>
                <ControlTemplate>
                    <ScrollViewer Name="Scroller" Padding="{TemplateBinding Padding}" HorizontalScrollBarVisibility="Visible" >
                        <ItemsPresenter />
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>               
        </ItemsControl>

点击事件：

private void Button_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        MessageBox.Show("Clickable!");
    }

这是查看捕获的代码：

 private void capture_Click(object sender, RoutedEventArgs e)
    {
        // Create a Bitmap of the same dimension of panelVideoPreview (Width x Height)
        using (Bitmap bitmap = new Bitmap(viewpanel.Width, viewpanel.Height))
        {
            using (Graphics g = Graphics.FromImage(bitmap))
            {
                // Get the paramters to call g.CopyFromScreen and get the image
                System.Drawing.Rectangle rectanglePanelVideoPreview = viewpanel.Bounds;
                System.Drawing.Point sourcePoints = viewpanel.PointToScreen(new System.Drawing.Point(viewpanel.ClientRectangle.X, viewpanel.ClientRectangle.Y));
                g.CopyFromScreen(sourcePoints, System.Drawing.Point.Empty, rectanglePanelVideoPreview.Size);
            }

            string strGrabFileName = String.Format(@"d:\app result\\Snapshot_{0:yyyyMMdd_hhmmss}.jpg", DateTime.Now);

            try
            {
                bitmap.Save(strGrabFileName, System.Drawing.Imaging.ImageFormat.Jpeg);
                imageview(strGrabFileName);
            }
            catch (Exception)
            {


            }                
        } 
    }

 public void imageview (string file)
    {          

            ImageDetails id = new ImageDetails()
            {
                Path = file,
                FileName = System.IO.Path.GetFileName(file),
                Extension = System.IO.Path.GetExtension(file)
            };

            BitmapImage img = new BitmapImage();
            img.BeginInit();
            img.CacheOption = BitmapCacheOption.OnLoad;
            img.UriSource = new Uri(file, UriKind.Absolute);
            img.EndInit();
            id.Width = img.PixelWidth;
            id.Height = img.PixelHeight;

            // I couldn't find file size in BitmapImage
            FileInfo fi = new FileInfo(file);
            id.Size = fi.Length;
            images.Add(id);
            //images.Insert(i, id);
            ImageList.ItemsSource = null;
            ImageList.ItemsSource = images;
    }

Answer 1

您是否考虑过使用命令而非点击事件？鉴于您使用的是WPF而不是Silverlight，以下是我为实现ItemsControl中呈现的DataTemplates的点击功能所做的工作：

<DataTemplate x:Key="YourDataTemplate">
        <TextBlock>
            <TextBlock.InputBindings>
                <MouseBinding 
                    MouseAction="LeftClick" 
                    Command="{Binding YourCommand}"
                    CommandParameter="{Binding YourCommandParameter}"></MouseBinding>
            </TextBlock.InputBindings>
        </TextBlock>
</DataTemplate>

这样做的第二个好处是可以避免依赖（相对不可测试的）代码隐藏。

如果您想坚持点击事件，您是否考虑过将DataTemplate中的顶级控件设为按钮？如有必要，您可以根据需要从按钮中删除样式。 Button在DataTemplates中仍然有一个Click属性，您可以在单击中调用其DataContext，甚至可以获取用于绑定的原始ImageDetails对象。

Answer 2

您可以尝试各种不同的东西来实现。查看this question

的答案

ItemsControl可点击的项目

2 个答案: