WPF Fisheye Control

If you are a big fan of Apple - Mac OS X Leopard, you will love this WPF animated dashboard that I've created.

I was inspired to build a control (Fish Eye effect) that would mimic the dashboard of the Mac's.

This is a simple implementation of the Fish Eye control:

<Controls:FishEyeControl VerticalAlignment="Bottom">
    <Image Source="{Binding Source={x:Static Images:ImageConstants.MESSAGES}}" 
           Width="32" 
           Height="32" />
    <Image Source="{Binding Source={x:Static Images:ImageConstants.CONTACTS}}" 
           Width="32" 
           Height="32" />
    <Image Source="{Binding Source={x:Static Images:ImageConstants.CALENDAR}}" 
           Width="32" 
           Height="32" />
</Controls:FishEyeControl>

This is a dynamic implementation (ItemsControl) of the Fish Eye control:

<ItemsControl ItemsSource="{Binding Path=DashBoardApps}" VerticalAlignment="Bottom" HorizontalAlignment="Center">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Controls:FishEyeControl />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <TextBlock x:Name="txtAppName" 
                           Text="{Binding Path=ApplicationName}" 
                           TextAlignment="Center" 
                           Visibility="Hidden" 
                           FontSize="7px" 
                           Foreground="#eff7ff" />
                <Button Width="32" Height="32">
                    <Image Source="{Binding Path=ApplicationImage}" />
                </Button>
            </StackPanel>
            <DataTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="txtAppName" Property="Visibility" Value="Visible" />
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Animated Dashboard

Please let me know if this helps you.

Using WPF ListView to display Complex Data Structure

I was ask @ work today, to display in a WPF List View, a list of items and within each item there are other list of items (subclass within a class).

There are lots of examples on the net to display to simple class.
But in the real world there is no simple data structure, only complex data structure.

I wrote is example to demonstrate the point.
Imagine that you have a list of movies, and each movie has a movie id, a title, a list (subclass) of images and descriptions for the movie, a list (subclass) of cast in the movie and a list (subclass) of movie recommendations.




Code:
A list of Movies

public List<Movie> MovieData

And each Movie has

public class Movie
{
       public int MovieId { get; set; }
       public string Title { get; set; }
       public IList<MovieInfos> Infos { get; set; }
       public IList<Cast> Cast { get; set; }
       public IList<string> Recommendations { get; set; }
}

MovieInfos is a subclass in the Movie class

public class MovieInfos
{
       public string Description { get; set; }
       public ImageSource MovieImage { get; set; }
}

Xaml:
Bind the list of movies to the WPF List View

<ListView ItemsSource="{Binding Path=MovieData}">
   <ListView.View>
       <GridView>
           <GridViewColumn DisplayMemberBinding="{Binding Path=MovieId}" Header="Movie Id" />
           <GridViewColumn DisplayMemberBinding="{Binding Path=Title}" Header="Title" />
           <!-- Can Bind to complex subclass -->
           <GridViewColumn Header="Movie(s)">
               <GridViewColumn.CellTemplate>
                   <DataTemplate>
                       <StackPanel>
                           <ItemsControl ItemsSource="{Binding Path=Infos}">
                               <ItemsControl.ItemsPanel>
                                   <ItemsPanelTemplate>
                                       <WrapPanel Orientation="Horizontal"/>
                                   </ItemsPanelTemplate>
                               </ItemsControl.ItemsPanel>
                               <ItemsControl.ItemTemplate>
                                   <DataTemplate>
                                       <StackPanel>
                                           <Image ToolTip="{Binding Path=Description}"
                                                          Source="{Binding Path=MovieImage}"
                                                          Margin="3,0,3,0"
                                                          Height="125" Width="75" />
                                       </StackPanel>
                                   </DataTemplate>
                               </ItemsControl.ItemTemplate>
                           </ItemsControl>
                       </StackPanel>
                   </DataTemplate>
               </GridViewColumn.CellTemplate>
           </GridViewColumn>
           <!-- Binding with data triggers -->
           <GridViewColumn Header="Cast">
               <GridViewColumn.CellTemplate>
                   <DataTemplate>
                       <StackPanel>
                           <ItemsControl ItemsSource="{Binding Path=Cast}">
                               <ItemsControl.ItemsPanel>
                                   <ItemsPanelTemplate>
                                       <WrapPanel Orientation="Vertical" />
                                   </ItemsPanelTemplate>
                               </ItemsControl.ItemsPanel>
                               <ItemsControl.ItemTemplate>
                                   <DataTemplate>
                                       <StackPanel Orientation="Horizontal">
                                           <TextBlock x:Name="tbName" Text="{Binding Path=Name}"/>
                                                   <Image x:Name="imgStar"
                                                          Visibility="Collapsed"
                                                          Source="{Binding Source={x:Static constants:ImageConstants.STAR}}"
                                                          Height="16" Width="16" Margin="3,0,0,0" />
                                       </StackPanel>
                                       <DataTemplate.Triggers>
                                           <DataTrigger Binding="{Binding Path=MainCharacter}" Value="True">
                                               <Setter TargetName="tbName" Property="Foreground" Value="Red" />
                                               <Setter TargetName="imgStar" Property="Visibility" Value="Visible" />
                                           </DataTrigger>
                                       </DataTemplate.Triggers>
                                   </DataTemplate>
                               </ItemsControl.ItemTemplate>
                           </ItemsControl>
                       </StackPanel>
                   </DataTemplate>
               </GridViewColumn.CellTemplate>
           </GridViewColumn>
           <!-- Simple binding -->
           <GridViewColumn Header="Recommendations">
               <GridViewColumn.CellTemplate>
                   <DataTemplate>
                       <StackPanel>
                           <ItemsControl ItemsSource="{Binding Path=Recommendations}">
                               <ItemsControl.ItemsPanel>
                                   <ItemsPanelTemplate>
                                       <WrapPanel Orientation="Vertical"/>
                                   </ItemsPanelTemplate>
                               </ItemsControl.ItemsPanel>
                               <ItemsControl.ItemTemplate>
                                   <DataTemplate>
                                       <StackPanel>
                                           <TextBlock Text="{Binding}"/>
                                       </StackPanel>
                                   </DataTemplate>
                               </ItemsControl.ItemTemplate>
                           </ItemsControl>
                       </StackPanel>
                   </DataTemplate>
               </GridViewColumn.CellTemplate>
           </GridViewColumn>
       </GridView>
   </ListView.View>
</ListView>

This sample demonstrates the power of WPF List View.

Using Items Control in WPF List View

Please let me know if this helps you.

WPF drop down and split button

I've been trying to create a drop down button and a split button in WPF.
It has been very frustrating, but I think I finally got it.

Drop Down and Split Button ver 1.2

I have updated the split button control to use command binding.

Please let me know if this helps you.