MVVM, WPF

WPF : Some Good Cinch News

I have now included some code snippets (C# only sorry) to help you develop ViewModels using my Cinch MVVM Framework.

I did not write these code snippets myself, one of the Cinch MVVM Framework users, a chap called Manuvdp uploaded them as a patch to the Cinch MVVM Framework codeplex site.

I have checked that I am happy with them before I included them, and I am. So what I have done is included Manuvdp original code snippets and also created a VSI Installer for them.

So after you have installed the snippets using the VSI, and you are doing a Cinch MVVM Framework app and type in “Cinch”, here is what you get:

snips

Neato.

In case any of you are wondering how to create a VSI installer for the code snippets here is a step by step guide.

Step1

Store your snippets in a folder somewhere (I called this CodeSnippets)

Step2

Create a new XML File in Visual Studio in the same folder as all your code snippets. I name this file CinchSnippets.xml. This xml file will be the manifest file.

Step3

Rename CinchSnippets.xml to CinchSnippets.vscontent

Step4

I edited the CinchSnippets.vscontent to include each of the snippets I wanted to be part of the VSI installer. Shown below is an example of what this xxxxx.vscontent manifest file should look like:

<?xml version="1.0" encoding="UTF-8"?>
<VSContent
  xmlns="http://schemas.microsoft.com/developer/vscontent/2005">
  <Content>
    <FileName>Cinch0.snippet</FileName>
    <DisplayName>Cinch : Code snippet for a 
    EditableValidatingObject overrides</DisplayName>
    <Description>Code snippet for a 
    EditableValidatingObject overrides
    </Description>
    <FileContentType>Code Snippet</FileContentType>
    <ContentVersion>1.0</ContentVersion>
    <Attributes>
      <Attribute name="lang" value="csharp"></Attribute>
    </Attributes>
  </Content>
  <Content>
    <FileName>CinchBGWorker.snippet</FileName>
    <DisplayName>Cinch : Code snippet for a 
    Background worker</DisplayName>
    <Description>
      Code snippet for a Background worker
    </Description>
    <FileContentType>Code Snippet</FileContentType>
    <ContentVersion>1.0</ContentVersion>
    <Attributes>
      <Attribute name="lang" value="csharp"></Attribute>
    </Attributes>
  </Content>
</VSContent>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

This is for 2 snippets, which you can see in the Content elements. If you need more, just add more Content elements.

Step5

I then zipped all the xxxx.snippet files and the xxxxx.vscontent file (CinchSnippets.vscontent in my case) into a new zip file, say CinchCodeSnippets.zip

Step6

I then renamed the zip file CinchCodeSnippets.zip –> CinchCodeSnippets.vsi

Step7

You can then run  the VSI installer by double clicking on the newly created CinchCodeSnippets.vsi

 

NOTE :I Would not download the entire Cinch MVVM Framework again, as I am still working on one improvement which I hope to have resolved very soon. You should however be able to grab all the items new CodeSnippets folder, and I will make an announcement on this blog when I have made the improvement or not. Depends on how hairy it gets, either way I will let you all know.

Enjoy

Advertisements
WPF

WPF : RatingsControl That Supports Fractions

I was at work the other day and one of my work collegues asked me how to create a Rating control (you know the ones with the stars). I talked him through how to do it, but whilst doing so I thought I might have a go at that if I get a spare hour or 2. I found some time to give it a go, and have come up with what I think is a pretty flexable RatingControl for WPF.

You are able to alter the following attributes

  • Overall background color
  • Star foreground color
  • Star outline color
  • Number of stars
  • Current value

All of these properties are DependencyProperty values, so they are fully bindable. This is all wrapped up in a very simple and easy to use UserControl called RatingsControl, Here is what the resulting RatingsControl looks like in a demo window.

Stars

The RatingsControl also contains n many StarControls that each renders its own value portion. You may be asking yourself how the control can render partial stars, well this figure may explain that

Stars2

Here is the code from the StarControl Value DP, which moves a masking Rectangle the correct distance to give the illusion of a fraction rendering of the Star. The masking Rectangle is clipped by using a standard Rectangle Clip value for the StarControl.

/// <summary>
/// Handles changes to the Value property.
/// </summary>
private static void OnValueChanged(DependencyObject d, 
    DependencyPropertyChangedEventArgs e)
{
    d.CoerceValue(MinimumProperty);
    d.CoerceValue(MaximumProperty);
    StarControl starControl = (StarControl)d;
    if (starControl.Value == 0.0m)
    {
        starControl.starForeground.Fill = Brushes.Gray;
    }
    else
    {
        starControl.starForeground.Fill = starControl.StarForegroundColor;
    }

    Int32 marginLeftOffset = (Int32)(starControl.Value * (Decimal)STAR_SIZE);
    starControl.mask.Margin = new Thickness(marginLeftOffset, 0, 0, 0);
    starControl.InvalidateArrange();
    starControl.InvalidateMeasure();
    starControl.InvalidateVisual();

}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

If you want to know more and get the download code you can do so using the article link which is :

http://www.codeproject.com/KB/WPF/WPFStarRating.aspx

Enjoy

WPF

WPF : A Strange Layout Issue

The other day I was doing a new View for a WPF app that we are working on, that required a DataTemplate that consisted something like the following:

<DataTemplate DataType="{x:Type local:EmbeddedViewModel}">
    <Expander x:Name="exp" 
    Background="Transparent"
          IsExpanded="True" ExpandDirection="Down" 
          Expanded="Expander_Expanded" 
              Collapsed="Expander_Collapsed">


        <ListView AlternationCount="0" 
             Margin="0" 
             Background="Coral"
             ItemContainerStyle="{DynamicResource ListItemStyle}"
             BorderBrush="Transparent"
             VerticalAlignment="Stretch"
             HorizontalAlignment="Stretch"
             ItemsSource="{Binding SubItems}"
             IsSynchronizedWithCurrentItem="True"
             SelectionMode="Single">

            <ListView.View>
                <GridView>

                    <GridViewColumn  
                        Width="100" Header="FieldA"
                        DisplayMemberBinding="{Binding FieldA}"/>

                    <GridViewColumn  
                        Width="100" Header="FieldB"
                        DisplayMemberBinding="{Binding FieldB}"/>

                </GridView>

            </ListView.View>
        </ListView>
    </Expander>
</DataTemplate>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Which is all cool, but when I let the View out there into the wild for testing the users were like, yeah that’s ok when there are lots of items, but what happens when there is only 1 item. We would like that 1 item to take up all the available space of the screen. And it got me thinking into how to do this. So this is what I came up with.

A ItemsControl that has a specialized Grid (GridWithChildChangedNoitfication) control as its ItemsPanelTemplate. The specialized grid simply raises an event to signal that it has had a new VisualChild added.

Here is the code for the full ItemsControl setup

<ItemsControl x:Name="items" 
    ItemsSource="{Binding Path=Items, Mode=OneWay}" 
    Background="Transparent" 
    ScrollViewer.VerticalScrollBarVisibility="Auto">

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <local:GridWithChildChangedNoitfication 
            VerticalAlignment="Stretch" 
            HorizontalAlignment="Stretch"
            Margin="0" Loaded="ItemsGrid_Loaded"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type local:EmbeddedViewModel}">
            <Expander x:Name="exp" 
            Background="Transparent"
                  IsExpanded="True" ExpandDirection="Down" 
                  Expanded="Expander_Expanded" 
                      Collapsed="Expander_Collapsed">


                <ListView AlternationCount="0" 
                     Margin="0" 
                     Background="Coral"
                     ItemContainerStyle="{DynamicResource ListItemStyle}"
                     BorderBrush="Transparent"
                     VerticalAlignment="Stretch"
                     HorizontalAlignment="Stretch"
                     ItemsSource="{Binding SubItems}"
                     IsSynchronizedWithCurrentItem="True"
                     SelectionMode="Single">

                    <ListView.View>
                        <GridView>

                            <GridViewColumn  
                                Width="100" Header="FieldA"
                                DisplayMemberBinding="{Binding FieldA}"/>

                            <GridViewColumn  
                                Width="100" Header="FieldB"
                                DisplayMemberBinding="{Binding FieldB}"/>

                        </GridView>

                    </ListView.View>
                </ListView>
            </Expander>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

And here is what the C# code looks like for the specialized Grid (GridWithChildChangedNoitfication).

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Controls;
using System.Windows;

namespace ShareOfSize
{
    public class GridWithChildChangedNoitfication : Grid
    {

        /// <summary>
        /// Override that allows us to tell when the
        /// VisualChildren collection has changed
        /// </summary>
        protected override void OnVisualChildrenChanged(
            DependencyObject visualAdded, 
            System.Windows.DependencyObject visualRemoved)
        {
            base.OnVisualChildrenChanged(visualAdded, 
                visualRemoved);
            OnGridVisualChildrenChanged(new EventArgs());
        }


        /// <summary>
        /// Raise an event to signal that a VisualChild has been
        /// added/removed
        /// </summary>
        public event EventHandler<EventArgs> 
            GridVisualChildrenChanged;

        protected virtual void 
            OnGridVisualChildrenChanged(EventArgs e)
        {
            EventHandler<EventArgs> handlers = 
                GridVisualChildrenChanged;

            if (handlers != null)
            {
                handlers(this, e);
            }

        }
    }
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

The last piece in the puzzle is some code behind that knows how to resize all the children in the ItemsControl when the VisualChild count of the specialized grid changes.

NOTE : This more than likely could be abstracted to a Attached Behaviour via an Attached Property, I’ll leave that as an activity for the user should they wish to do that. For me as it was so UI I did not mind this bit of code behind.

    public partial class Window1 : Window
    {

        private GridWithChildChangedNoitfication itemsGrid;


        public Window1()
        {
            InitializeComponent();
            this.DataContext = new Window1ViewModel();
            this.Unloaded += ViewUnloaded;

        }


        private void ViewUnloaded(object sender, RoutedEventArgs e)
        {
            if(itemsGrid != null)
            {
                itemsGrid.GridVisualChildrenChanged 
                    -= GridChildrenChanged;
            }
        }

        private void GridChildrenChanged(object sender, EventArgs e)
        {
            ResizeRows();
        }


        private void ResizeRows()
        {
            if (itemsGrid != null)
            {
                itemsGrid.RowDefinitions.Clear();
                for (int i = 0; i < itemsGrid.Children.Count; i++)
                {
                    RowDefinition row = new RowDefinition();
                    row.Height = new GridLength(
                        itemsGrid.ActualHeight/
                            itemsGrid.Children.Count,GridUnitType.Pixel);
                    itemsGrid.RowDefinitions.Add(row);
                            
                    itemsGrid.Children[i].SetValue(
                        HorizontalAlignmentProperty, 
                        HorizontalAlignment.Stretch);
                    itemsGrid.Children[i].SetValue(
                        VerticalAlignmentProperty, 
                        VerticalAlignment.Stretch);
                    itemsGrid.Children[i].SetValue(Grid.RowProperty,i);              
                }
            }         
        }



        private void ItemsGrid_Loaded(object sender, RoutedEventArgs e)
        {
            itemsGrid = sender as GridWithChildChangedNoitfication;
            if(itemsGrid != null)
            {
                itemsGrid.GridVisualChildrenChanged +=
                    GridChildrenChanged;
            }
        }

        private void Expander_Expanded(object sender, RoutedEventArgs e)
        {
            Expander expander = sender as Expander;
            var item = ItemsControl.ContainerFromElement(items, 
                (DependencyObject)sender);

            Int32 row = (Int32)(item).GetValue(Grid.RowProperty);

            if (expander.Tag != null)
            {
                itemsGrid.RowDefinitions[row].Height = 
                    new GridLength((Double)expander.Tag,GridUnitType.Pixel);
            }
        }

        private void Expander_Collapsed(object sender, RoutedEventArgs e)
        {
            Expander expander = sender as Expander;
            var item = ItemsControl.ContainerFromElement(items, 
                (DependencyObject)sender);

            Int32 row = (Int32)(item).GetValue(Grid.RowProperty);

            if (expander.Tag == null)
            {
                expander.Tag = itemsGrid.RowDefinitions[row].Height.Value;
            }
            itemsGrid.RowDefinitions[row].Height = 
                new GridLength(40,GridUnitType.Pixel);
        }



    }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Here is what it all looks like

Share

Now I am sure there is some bright spark out there that could have done this with Grid.IsSharedSizeScope I just couldn’t see that myself, so this is what I came up with.

As always here is a small demo app:

http://sachabarber.net/wp-content/uploads/2009/11/ShareOfSize.zip

C#, WPF

Windows7 / VS2010 / WPF 4 Demo App

The other day I finished up a small demo app that I was writing over at www.codeproject.com which covers several of the new Windows7 features such as TaskBars/JumpLists.

The finished article looks like this

 

start2

start4

start5

task

The idea behind this demo app is actually very simple, I wanted to show how to use the Managed Extensibility Framework (MEF) to add in a bunch of Pixel Shaders that were inside a separate assembly. I also use some of the new .NET 4.0 goodies such as Dynamic and ExpandoObject.

The demo app also show cases how to use the new System.Windows.Shell namespace.

In case you are wondering here is how you would create a JumpList using the new System.Windows.Shell namespace.

JumpList jumpList = new JumpList();
JumpList.SetJumpList(Application.Current, jumpList);

JumpTask jumpTask = new JumpTask();
jumpTask.Title = "IE";
jumpTask.CustomCategory = 
    "Keep Notes";
jumpTask.ApplicationPath = 
    @"C:Program FilesInternet Exploreriexplore.exe";
String systemFolder = 
    Environment.GetFolderPath(
        Environment.SpecialFolder.System);
jumpTask.IconResourcePath = 
    @"C:Program FilesInternet Exploreriexplore.exe";
jumpTask.IconResourceIndex = 0;
jumpTask.Arguments = "pixel shaders";
jumpList.JumpItems.Add(jumpTask);
jumpList.Apply();

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

And here is how you can create a TaskBar that can interact with your application code, again using the new System.Windows.Shell namespace.

<Window x:Class="MefFX.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MefFX" Height="600" Width="800">


    <Window.TaskbarItemInfo>
        <TaskbarItemInfo
            ProgressState="Normal" 
            Description="Some text"
            ThumbnailClipMargin=
        "{Binding RelativeSource=
            {RelativeSource FindAncestor, 
                    AncestorType={x:Type Window}}, 
            Path=BorderThickness}">
            <TaskbarItemInfo.ThumbButtonInfos>
                <ThumbButtonInfo
                   Click="SearchForPixelShadersInside_Click"
                    DismissWhenClicked="False"
                    ImageSource="Images/ie.png" />
                <ThumbButtonInfo Command="{Binding AboutCommand}"
                    DismissWhenClicked="False"
                    ImageSource="Images/about.png" />
            </TaskbarItemInfo.ThumbButtonInfos>
        </TaskbarItemInfo>


    </Window.TaskbarItemInfo>


....
....
....
....

</Window>

 

This TaskBar is obviously done in WPF4.0 using XAML but it would be easy enough to do in WinForms using the TaskbarItemInfo class which is in the new System.Windows.Shell namespace.

Anyway the full article explains all this and a lot more in a lot more detail, so if you feel inclined to have a read through of that, the full article is available over at this link:

http://www.codeproject.com/KB/WPF/MefFX.aspx

Enjoy
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

C#, WPF

WPF : A True WPF Browser Control That Can Bend It Like Beckham

A while ago I wanted to use the new .NET 3.5 SP1 WebBrowser control is a small demo WPF app that I was using to display streamed YouTube videos. And guess what, I was way disappointed the supposedly new rad control, was a con and it was actually no better than using a WPF Frame object or even hosting the WinForms  WebBrowser control. The reason being that all of these internally are HWnd (therefor different graphics rendering pipeline) controls.

So no matter what you do they will always be square and appear on top of WPF content, which sucks really.

Luckily some clever fellas out there didn’t like this either and came up with some cool C++ dll called Awesomium which you can get over at

http://princeofcode.com/awesomium.php#download

And then to top that off Chris Cavanagh (Physics genius) wrapped it to make it WPF like. He calls this

WPF 3D Chromium Browser

Which you can find over at Chris Cavanaghs site using this Url

http://chriscavanagh.wordpress.com/2009/08/27/wpf-3d-chromium-browser/

Here is a screen shot of it working, You can get a better sample over at Chris’s site

image

The entire XAML looks like this

<Window x:Class="BrowserApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="500"
        xmlns:chr="clr-namespace:Cjc.ChromiumBrowser;assembly=Cjc.ChromiumBrowser">

    <Grid>



    <chr:WebBrowser x:Name="browser" IsEnabled="False" 
                Width="300" Height="300" 
                EnableAsyncRendering="False"
                RenderTransformOrigin="0.5,0.5">
            <chr:WebBrowser.RenderTransform>
                <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" 
                                    ScaleX="0.75" ScaleY="0.75"/>
                    <SkewTransform AngleX="15" AngleY="15"/>
                </TransformGroup>
            </chr:WebBrowser.RenderTransform>

        </chr:WebBrowser>

    </Grid>
</Window> 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

As usual here is a small demo app .

http://sachabarber.net/wp-content/uploads/2009/11/Browser.zip

I should point out that it is Visual Studio 2010 and as such I had to set the following up in my App.Config to get it to work:

<?xml version="1.0"?>
<configuration>
  <startup useLegacyV2RuntimeActivationPolicy="true">
     <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/>
  </startup>
</configuration>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

C#, MVVM, WPF

WPF : Tube Planner Using A Guided Search

I recently came back from holiday and decided I needed to ease myself back into work gradually.

For those that don’t know I studied AI as part of my degree and we had to do a search of a cut down version of the London underground for one of our many assignments. At the time I thought my text only search was the mutts nuts, but now we have WPF so I thought why not give it another go.

I have to say I am most pleased with the result.

It is over at www.codeproject.com if you fancy a look. Here is a link

http://www.codeproject.com/KB/WPF/TubePlanner.aspx

 

And here is what it does:

  • Panning
  • Zooming
  • Station connection tooltips
  • Hiding unwanted lines (to de-clutter the diagram)
  • Information bubble
  • Diagramatic solution path visualization
  • Textual solution path description

Here is what it looks like:

As always if you fancy leaving a comment or a vote that would be cool, thanks.

C#, CodeProject, WPF

WPF : Callout Popup

I could not sleep last night, thinking too much I guess, so I got up and tried something out for a larger project ( article for www.codeproject.com ) that I am working on.

Basically I needed a nice animated callout that could also take some content.

This seems to be the exact role of the standard WPF Popup primitive, so I thought I’ll just use that and tweak it a bit. And about 30 minutes later, I have a nice callout popup which animates in using the standard Popup PopupAnimation enumeration.

The only thing is that the Width and Height and direction of the callout are hardcoded in the attached example, but if you were so inclined I am sure you could alter that.

Any way here is the callout popup in action (nice drop shadow, no?)

image

As always here is a small demo project link

http://sachabarber.net/wp-content/uploads/2009/11/CalloutPopup.zip

Also look out for the upcoming article that goes with this. It’s an AI type search article. I have been laying low for a while but this one was quite fun. I have loads more interesting stuff planned, as always its just finding the time.