BrownBot Logo BrownBot Head

Taking Route Planning To The Next Level

3:37 pm Filed under: C#, WPF, Work

Some days I think I don’t have a bad handle on this WPF stuff, this weeks new route planning UI is some of my finest work yet. I can’t take all the credit though, Microsoft have done a stellar job with the Bing maps WPF control.

In the image below the days across the top of the map are actually a ListBox, the selected day brings forward and expands the order pins and lists the available trucks for that day. You simply drag the order from the map screen to the truck on the side to plot a route, you can even drag order items between trucks to re-route them.

RoutePlanning

I’ve still got a fair bit of detail to add and some more database fields to store the data, but most of technical hurdles have been overcome at this point. I’ll blog about a couple of tricky points I’ve hit soon.

Render a WPF Control On Reporting Services Report

12:15 am Filed under: C#, WPF, Work

I struck an issue this week where I need to display some ranged data in nice concise and easy to understand way on screen and on a report.  I tried graphing the data in Excel and a bar graph almost works but some of the data works back from 100% which won’t graph properly.

So today I set out to see if it was possible to render out a WPF control to an in memory byte[] on an extended “View” version of our Contract business object and bind an image to that property. After a lot of mucking about I finally got this.

 WPF control on reporting services report

Yep that’s a WPF button on an RS Report bound to an in memory object rendered on screen in the Winforms report viewer control.

Codewise it’s not that tricky really, if you follow the class below you can see how I render out the byte[] for the property in the constructor. We’re using VS2010 so you need to have your objects Serializable to use them in reporting services.

[Serializable]
    public class GrainPurchaseContractReportView : GrainPurchaseContract
    {
        public GrainPurchaseContractReportView(GrainPurchaseContract src)
        {
            // copy base class feilds here
            GenerateTestStandardGraph();
        }

        public GrainPurchaseContractReportView(SerializationInfo info, StreamingContext context)
            : base(info, context)
        {
            _bmp = (Byte[])info.GetValue("StandardsGraph", typeof(Byte[]));
        }

        private Byte[] _bmp;

        public Byte[] StandardsGraph
        {
            get { return _bmp; }
        }

        private void GenerateTestStandardGraph()
        {
            BitmapEncoder encoder = new BmpBitmapEncoder();
            Button btn = new Button()
            {
                Content = "WPF",
                Height=40,
                Width=200
            };
            double dpi = 96;

            RenderTargetBitmap rtb = new RenderTargetBitmap(
                (Int32)(btn.Width * dpi / 96),
                (Int32)(btn.Height * dpi / 96),
                dpi,
                dpi,
                PixelFormats.Default);

            // Get the size of canvas
            Size size = new Size(btn.Width, btn.Height);

            // force control to Update
            btn.Measure(size);
            btn.Arrange(new Rect(size));

            rtb.Render(btn);

            using (MemoryStream ms = new MemoryStream())
            {
                encoder.Frames.Add(BitmapFrame.Create(rtb));
                encoder.Save(ms);
                _bmp = new byte[ms.Length];

                ms.Seek(0, SeekOrigin.Begin);
                ms.Read(_bmp, 0, _bmp.Length);
            }

        }

        public override void GetObjectData(SerializationInfo info, StreamingContext context)
        {
            info.AddValue("StandardsGraph", StandardsGraph, StandardsGraph.GetType());
            base.GetObjectData(info, context);
        }
    }

The last part is to place an image on the report and use the “Database” source type and point it to your property.

WPF control on reporting services report image properties

Of course rendering a button on the report is not that handy, next I’ve got to build a user control that will render the actual data from our object.

New MilliT Home Page

9:17 pm Filed under: WPF, Work

Even though I’m nursing a sick baby today, I’ve managed to get those icons implemented into the admin program. I knocked up a custom ItemsControl with a BitmapImage and Title dependency properties, that has an Image with the TextBlock and a popup within the overwritten ControlTemplate.

The net result is the app “Home page” has gone from this horrible mess (Admittedly I let it get pretty bad because I knew it was going to be replaced):

MilliT-Before

To this:

MilliT-After

I also coloured and overlayed some stripes to the outer border, the stripes are a reference to the program icon and I think the colour helps separate the application controls from the content controls within the navigation pane.

I’m happy with the overall visual design of the MilliT app now, the weighbridge client needs a little attention next.

Purrrdy Icons

8:16 pm Filed under: WPF, Work

Having a fun day at work today knocking up some iPhone like icons for a new main menu screen in our administration app at the mill, MilliT. The plan is that the main screen will be an array of these icons, when you either hover over or click (not sure which yet) the icon you’ll see a popup with a list of app navigation links to click on.

Finance Production Pricing Products Contacts Contracts Deliveries

If I’ve done my job well you should be able to guess what each one if for, you can check by hovering over them.

I recon they hang together pretty well.

Popup With Shiny Black Reflection

7:50 pm Filed under: C#, WPF, Work

Easing myself back into work this morning with a few general updates around MilliT and the new Weighbridge client, there’s probably a hundred other more pressing jobs to do but I got side tracked with a little visual refresh of the hover over popup controls (which I blogged about some time ago http://www.brownbot.com/XNABlog/?p=325).

Here’s what they look like now, I think the black makes it really obvious that they’re separate to the rest of the app, the wanky iPhone like gradient adds some contemporary design fluff.

Popups

For any of you WPFers out there here’s the style code.

<LinearGradientBrush x:Key="PopupBorderGrad" StartPoint="0,0" EndPoint="1,0.2" >
    <GradientStop Color="#FF242424" Offset="0"/>
    <GradientStop Color="#FF383838" Offset="0.4"/>
    <GradientStop Color="#FF000000" Offset="0.401"/>
    <GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>

<Style x:Key="PopupBorderStyle" TargetType="{x:Type Border}">
    <Setter Property="CornerRadius" Value="5,5,5,5"/>
    <Setter Property="BorderThickness" Value="0,1,0,0"/>
    <Setter Property="BorderBrush" Value="#FF888888"/>
    <Setter Property="Margin" Value="10,0,10,10"/>
    <Setter Property="Padding" Value="5,5,5,5"/>
    <Setter Property="Background" Value="{StaticResource PopupBorderGrad}"/>
    <Setter Property="SnapsToDevicePixels" Value="True" />
</Style>

Powered by WordPress