Showing earmark for thumbnail image.

Question

Hi,

I have a list box loaded with thumbnails. (.JPG, >PNG,.BMP, .TIFF etc)

I want to create a small earmark on the upper right corner of a thumbnail(to indicate that there is additional detail for that thumbnail).

How to implement the above scenario in WPF without using any 3rd party tools?

Do I need to write any Customized Style or Template.?

Thanks in advance.

Answer 1

Hi Vijay Zalaki,

>> "Do I need to write any Customized Style or Template.?"

I suggest that you could use ItemTemplate to implement it. I have made a sample for your reference.

<ListBox  Name="lstImages">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Canvas Height="100" Width="100">
                <Image Source="{Binding ImageUri}" Height="100" />
                <Label Content="√" Foreground="Red" FontSize="16" Canvas.Right="0" Visibility="{Binding MarkVisable}"/>
            </Canvas>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    List<ImageItem> images = new List<ImageItem>();
    images.Add(new ImageItem { ImageUri = "1.jpg", MarkVisable= System.Windows.Visibility.Visible });
    images.Add(new ImageItem { ImageUri = "2.jpg", MarkVisable = System.Windows.Visibility.Hidden });
    images.Add(new ImageItem { ImageUri = "3.jpg", MarkVisable = System.Windows.Visibility.Visible });

    lstImages.ItemsSource = images;
}

public class ImageItem
{
    public string ImageUri { get; set; }

    public Visibility MarkVisable { get; set; }
}

Best Regards,

Xavier Eoro

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

>>I want to create a small earmark on the upper right corner of a thumbnail(to indicate that there is additional detail for that thumbnail).

In addition to Xavier, the easiest way to put something in the upper right corner of another element would be to put both elements in the same Grid:

        <ListBox  Name="lstImages">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Source="{Binding ImageUri}" Stretch="None" />
                        <TextBlock Text="√" HorizontalAlignment="Left" VerticalAlignment="Top"/> <!-- You could replace this TextBlock with whatever element you want-->
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

The last element in the Grid will end up on top of the first one.

Hope that helps.

Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

Answer 3

Hi Xavier,

Thanks for providing the sample. That was helpful.

My actual requirement is displaying the earmark just outside the thumbnail (listbox item)

PFA for better understanding(Blue color earmark, it can be a small image). How do I customize ItemTemplate to implement the same.?

Thanks in advance.

Answer 4

You should have come back a bit faster than 2 weeks. Seeing as you just left it, the thread has had answers marked and is considered closed.

.

With Magnus' approach your earmark would be inside the itemtemplate.

I don't really follow why it's significant to you whether it's in the item or outside.

I can't see what difference it'd make.

But... anyhow.

You could set a margin on the itemspaneltemplate and push the earmark over into that space.

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"
                               Margin="0,0,14,0"
                               />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

That adds a 14px space to the right of the container which holds all the items. This is inside the scroller / right edge of listbox control.

Let's imagine your earmark will be an Image. A path might be more appropriate from the look of it... But just bear in mind you can have any old control instead of an image here.

<ListBox.ItemTemplate>
     <DataTemplate>
        <Grid>
<Image Name="MainPic"
       .... />
           
<Image Name="EarMark"
	HorizontalAlignment="Right"
        >
   <Image.RenderTransform>
         <TranslateTransform X="14" Y="0"/>
   </Image.RenderTransform>

---

Hope that helps.

Technet articles: WPF: Layout Lab; All my Technet Articles

Answer 5

Hi Andy ONeill,

Thank you very much, that really worked!

Marking as answer.

Thanks

Answer 6

For completeness, I should mention a few things.

If you wanted your earmark on the left you could just use horizontal alignment left and a negative margin on it and it'd work. Horizontal alignment right and a positive margin would not.

Hence the translatetransform ( which could also work to the left ).

All this depends on that margin on the wrappanel and of course that's inside the slider.

If you wanted the earmark to appear over the slider on the listbox ( a bad idea ) or to the right of the listbox then you'd have to use an adorner.

---

Hope that helps.

Technet articles: WPF: Layout Lab; All my Technet Articles