StealthRT StealthRT - 1 month ago 9
Vb.net Question

Draw lines around selected image in listview

Hey all I have the following code:

<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>


Depending on which item is selected in the listview I want to be able to draw a rectangle around that image inside that listview box.

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


Now there are 2 problems here:


1 - img1 in the code DrawLine() says "Error BC30451 'img1' is not declared. It may be inaccessible due to its protection level."

2- Target As Image in the code **** does not seem to have any Target.Children as the error says "Error BC30456 'Children' is not a member of 'Image'."


What do I need to do in order to draw that rectangle around the selected image box ONLY?

Requested screen shot

enter image description here

Answer

This kind of thing is much easier to do in XAML than in C#. If you want the border around just the image, it would go in the DataTemplate. Like this:

<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>
                <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>

If you wanted the border around the whole thing, the item control template in ListViewItemStyle would have been more appropriate.

Comments