在listview中围绕选定图像绘制线条

时间:2016-11-03 19:19:14

标签: wpf vb.net

嘿,我有以下代码:

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:scrollView"
        mc:Ignorable="d"
        Background="LightGray"
        Title="MainWindow" Height="350" Width="964.806">
    <Window.Resources>
        <Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="2,0,0,0"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 
                            Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="Transparent"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Storyboard x:Key="sb" RepeatBehavior="Forever">
            <DoubleAnimation 
                Storyboard.TargetName="TvBox"
                From="0" 
                To="1" 
                AutoReverse="True" 
                Duration="0:0:10" />
        </Storyboard>
    </Window.Resources>
    <ListView 
        x:Name="TvBox" 
        ItemContainerStyle="{DynamicResource ListViewItemStyle}"
        HorizontalAlignment="Stretch" 
        Background="Transparent" 
        BorderThickness="0" 
        VerticalAlignment="Top" 
        IsTextSearchEnabled="False" 
        SelectionMode="Single" 
        UseLayoutRounding="True" 
        ScrollViewer.VerticalScrollBarVisibility="Hidden" 
        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="5" HorizontalAlignment="Center"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ListView.ItemTemplate x:Uid="LVUID">
            <DataTemplate x:Name="DT">
                <StackPanel x:Name="SP" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <Image 
                        x:Name="img1" 
                        RenderOptions.BitmapScalingMode="HighQuality" 
                        Source="{Binding ImageData}" 
                        Margin="10" 
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Top" 
                        Stretch="Uniform" 
                        Width="150">
                        <Image.BitmapEffect>
                            <DropShadowBitmapEffect x:Name="theglowing" Softness=".7" ShadowDepth="3" Color="Black" />
                        </Image.BitmapEffect>
                    </Image>                  
                    <TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" HorizontalAlignment="center" Visibility="Hidden" />
                </StackPanel>
            </DataTemplate>            
        </ListView.ItemTemplate>
    </ListView>
</Window>

根据列表视图中选择的项目,我希望能够在该列表视图框内围绕该图像绘制一个矩形。

Private Sub TvBox_KeyUp(sender As Object, e As KeyEventArgs) Handles TvBox.KeyUp
   Dim lv As ListViewItem = e.OriginalSource
   Dim lvi As MovieData = lv.DataContext

   If e.Key = Key.Left Then
        Call DrawLine(New Point(0, 0), New Point(100, 100), img1)
   End If
End Sub

Private Sub DrawLine(From As Point, [To] As Point, Target As Image)
    Dim CurrentLine = New Line()
    CurrentLine.StrokeEndLineCap = PenLineCap.Round
    CurrentLine.StrokeStartLineCap = PenLineCap.Round
    CurrentLine.Stroke = Brushes.Red
    CurrentLine.StrokeThickness = 2.0
    CurrentLine.X1 = From.X
    CurrentLine.Y1 = From.Y
    CurrentLine.X2 = [To].X
    CurrentLine.Y2 = [To].Y
    Canvas.SetLeft(Target, From.X)
    Canvas.SetTop(Target, From.Y)
    Target.Children.Add(CurrentLine)
End Sub

现在有两个问题:

  代码 DrawLine()中的

1 - img1 表示&#34;错误BC30451&#39; img1&#39;没有宣布。由于其保护级别,它可能无法访问。&#34;

     代码****中的

2- 目标为图像似乎没有任何 Target.Children ,因为错误显示&#34;错误BC30456&#39;儿童&#39;不是&#39; Image&#39;。&#34;

的成员

为了在所选图像框周围绘制该矩形,我需要做什么?

请求的屏幕截图

enter image description here

1 个答案:

答案 0 :(得分:2)

这种事情在XAML中比在C#中容易得多。如果您希望周围的边框只是图像,它将进入DataTemplate。像这样:

<ListView.ItemTemplate>
    <DataTemplate x:Name="DT">
        <StackPanel x:Name="SP" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Grid>
                <Image 
                    x:Name="img1" 
                    RenderOptions.BitmapScalingMode="HighQuality" 
                    Source="{Binding ImageData}" 
                    Margin="10" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Top" 
                    Stretch="Uniform" 
                    Width="150"
                    >
                    <Image.BitmapEffect>
                        <DropShadowBitmapEffect x:Name="theglowing" Softness=".7" ShadowDepth="3" Color="Black" />
                    </Image.BitmapEffect>
                </Image>
                <!-- Superimpose border over Image with the same margin, so 
                it's inside the Image's drop shadow. -->
                <Border 
                    x:Name="ImageBorder"
                    BorderThickness="1"
                    Margin="10"
                    >
                </Border>
            </Grid>
            <TextBlock Text="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="center" Visibility="Hidden" />
        </StackPanel>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}" Value="True">
                <Setter TargetName="ImageBorder" Property="BorderBrush" Value="Red" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ListView.ItemTemplate>

如果你想要围绕整个事物的边框,ListViewItemStyle中的项目控制模板会更合适。