This part adds a filtering images out of view using size as the basis. So If user wants to see images bigger than certain size, he could use the slider to do it. This means I needed to convert size into opacity so if the size of image was less than what was set in the slider then I needed to set the opacity of the image. Here is how it looks like when it is running

To get to this point, I need to build an IValueConverter implementation that converts size into opacity, which was pretty straight forward.

SizeToOpacityConverter.cs

using System;
using System.Windows.Data;
 
namespace Search
{
    public class SizeToOpacityConverter : IValueConverter
    {
        #region Public Members
 
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            Tile tile = (Tile)parameter;
            int imagesize = (int)value/1000;
            if (tile.FilterSize < imagesize)
                return 1;
            else
                return 0.2;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }
        #endregion
    }
}

ImageGridView.Xaml

<UserControl x:Class="Search.Image3DView"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Search;assembly=Search"
    xmlns:control="clr-namespace:MyControls;assembly=MyControls"
    >
    <UserControl.Resources>
        <local:ImageSourceConverter x:Key="imagesourceconverter"/>

        <local:Tile x:Key="TileInfo"/>
    </UserControl.Resources>
    <ItemsControl ItemsSource="{Binding}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <control:Stack3DPanel FrameCount="5"
                                      MouseLeftButtonDown="Stack3DPanel_MouseLeftButtonDown"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border
                    BorderThickness="2,2,2,2" BorderBrush="#FF313131"
                    CornerRadius="5,5,5,5"
                    MouseEnter="Border_MouseEnter"
                    MouseLeave="Border_MouseLeave" Background="White">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Border.RenderTransform>
                    <Image
                        Margin="5,5,5,5"  Stretch="Uniform"
                        Source="{Binding Image.ImageURL , Converter={StaticResource imagesourceconverter}}"
                        RenderTransformOrigin="0.5,0.5"
                        x:Name="image"
                        HorizontalAlignment="Stretch">
                        <Image.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Image.RenderTransform>
                    </Image>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

Second part was the bind the opacity of images with filesize and use above SizeToOpeacityConverter. Interesting part of this xaml is

<Image
   Source="{Binding Image.ThumbnailURL, Converter={StaticResource imagesourceconverter}}"
   Opacity="{Binding Image.ImageFileSize ,
Converter={StaticResource sizetoopacityconverter},
ConverterParameter={StaticResource TileInfo}}"
   ImageFailed="Image_ImageFailed"
   Cursor="Hand"
   Margin="1,1,1,1"/>

Then I hit this problem, which I ended up solving but I am not sure if this is the best way to solve it. If I find it, i will post again later. The problem is that thing that updates in above code is ConverterParameter for the Binding and When parameter changes, I could figure out a way to update a single binding. So I ended up writing this code which actually performance wise was good enough for me but that just seems like a wrong way to do it..

Page.xaml.cs

private voidsizeslider_ValueChanged(objectsender, RoutedPropertyChangedEventArgs<double> e)
{
    strings = e.NewValue.ToString();
    txtvalue.Text = “> ” + s.Split(new char[]{‘.’})[0] + ” (KB)”;
    imageGrid.FilterSize = e.NewValue;
    imageGrid.DataContext = null;
    imageGrid.DataContext = _searchresultcollectioncollection;
}

This basically resets the datacontext and hence all bindings are recomputed.

Here is the copy of working project.

Professional, Software

Part 8: 3D Image View Using Custom Layout

3D Image View

Technorati Tags: Silverlight,Custom,layout,panel,live,search

I think to make view usable, it needs lot more work. But I wanted to build something that could not be easily built using HTML ( and I needed a place to use my stack 3d panel 🙂 ). But here is what it looks like. Getting to this place was pretty easy because I already had a panel that could do this.

Here are few things I used in this…

Custom Panels: Building Custom Layout
ItemsControl: Changing default layout

Building this involved building a user control which has a itemscontrol but instead of using default stackpanel that lays out items vertically, I used stack3dpanel to layout items as if they are in 3d.

Image3DView.xaml

<UserControl x:Class="Search.Image3DView"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Search;assembly=Search"
    xmlns:control="clr-namespace:MyControls;assembly=MyControls"
    >
    <UserControl.Resources>
        <local:ImageSourceConverter x:Key="imagesourceconverter"/>

        <local:Tile x:Key="TileInfo"/>
    </UserControl.Resources>
    <ItemsControl ItemsSource="{Binding}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <control:Stack3DPanel FrameCount="5"
                                      MouseLeftButtonDown="Stack3DPanel_MouseLeftButtonDown"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border
                    BorderThickness="2,2,2,2" BorderBrush="#FF313131"
                    CornerRadius="5,5,5,5"
                    MouseEnter="Border_MouseEnter"
                    MouseLeave="Border_MouseLeave" Background="White">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Border.RenderTransform>
                    <Image
                        Margin="5,5,5,5"  Stretch="Uniform"
                        Source="{Binding Image.ImageURL , Converter={StaticResource imagesourceconverter}}"
                        RenderTransformOrigin="0.5,0.5"
                        x:Name="image"
                        HorizontalAlignment="Stretch">
                        <Image.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Image.RenderTransform>
                    </Image>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

The most interesting part of this xaml is

<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <control:Stack3DPanel FrameCount="5"
                                  MouseLeftButtonDown="Stack3DPanel_MouseLeftButtonDown"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

This tells ItemsControl to use my custom panel to layout individual items in the source collection. This control also uses valueconverters for converting URI to source.

Image3DView.xaml.cs

using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using MyControls;

namespace Search
{
    public partial class Image3DView : UserControl
    {
        public Image3DView()
        {
            InitializeComponent();
        }

        //if iamge fails to load then placeholder image is shown
        private void Image_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {
            ((Image)sender).Source = new BitmapImage(new Uri("notfound.jpg", UriKind.Relative));
        }

        //on mouse enter, increase the size of image and set opacity to 1
        private void Border_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
        {
            //hover effect
            Border b = (Border)sender;
            b.Child.Opacity = 1;
            TransformGroup tg = b.RenderTransform as TransformGroup;
            ScaleTransform st = tg.Children[0] as ScaleTransform;
            st.ScaleX = 1.0;
            st.ScaleY = 1.05;
            b.Background = new SolidColorBrush(Colors.LightGray);
        }

        //on mouse leave, reset the size of image and set opacity to 0
        private void Border_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
        {
            //reset hover effect
            Border b = (Border)sender;
            b.Child.Opacity = 0.8;
            TransformGroup tg = b.RenderTransform as TransformGroup;
            ScaleTransform st = tg.Children[0] as ScaleTransform;
            st.ScaleX = 1;
            st.ScaleY = 1;
            b.Background = new SolidColorBrush(Colors.White);
        }

        private void Stack3DPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (e.Handled == false)
            {
                ((Stack3DPanel)sender).MoveNext();
            }
        }
    }
}

I also made some changes to Page.xaml and Page.xaml.cs to show this view appropriately. Here is the copy of full working project.

	Arielle Hsy on Fix for Button control
	Anthonyvef on Binding to Image source
	jenkinslopez41428 on CodePlex for PAX and PAX-Refle…
	backconnect proxies on Hyperlink Control
	backconnect proxies… on Fixes for Sample ScrollViewer

Desperately Seeking Love of Sophie

Tag Archives: Silverlight

All Search Application Posts So Far…

Part 9: Image Size Filter