Kenneth Ham

iPhone Style Dialog UI for WPF

admin — Thu, 17 May 2012 18:29:24 +0000

The iPhone’s interface is the holy grail of design, so let’s see if we can get a similar look in WPF. The image below is what we are trying to achieve:

iPhone UI

WPF iPhone Dialog

This dialog has a nice pop-in effect when it’s set to visible and it will automatically resize to its contents and still look nice.

Alright, enough talk, here’s the code for the window:

Code
    <Grid>

        <Border x:Name=”Popup” SnapsToDevicePixels=”True” Opacity=”.96″ CornerRadius=”9.5″>

            <Border BorderBrush=”#666″ BorderThickness=”.5″ CornerRadius=”9.5″>

                <Border BorderBrush=”#99FFFFFF” BorderThickness=”2″ CornerRadius=”7.5″>

                    <Grid>

                        <Ellipse Height=”75″ VerticalAlignment=”Top” HorizontalAlignment=”Stretch” Margin=”0 -35 0 0″ Opacity=”.2″>

                            <Ellipse.Fill>

                                <LinearGradientBrush StartPoint=”0,0″ EndPoint=”0,1″>

                                    <GradientStop Offset=”1″ Color=”#33FFFFFF”>GradientStop>

                                    <GradientStop Offset=”.467″ Color=”#FFFFFFFF”>GradientStop>

                                    <GradientStop Offset=”.466″ Color=”#00FFFFFF”>GradientStop>

                                    <GradientStop Offset=”0″ Color=”#00FFFFFF”>GradientStop>

                                LinearGradientBrush>

                            Ellipse.Fill>

                        Ellipse>

                        <Border Padding=”20″ CornerRadius=”7″>

                            <DockPanel>

                                <TextBlock DockPanel.Dock=”Top” Text=”{Binding Title}“ Foreground=”White” FontSize=”16pt” HorizontalAlignment=”Center” FontWeight=”SemiBold” TextWrapping=”Wrap”>

                                TextBlock>

                                <Button FontFamily=”Verdana” x:Name=”btnClose” DockPanel.Dock=”Bottom” Margin=”0 10 0 0″ Template=”{StaticResource dialogButton}“ Content=”{Binding CloseButtonCaption}“ Width=”100″ Foreground=”White” Command=”{Binding Close}“>

                                    <Button.Style>

                                        <Style TargetType=”{x:Type Button}“>

                                            <Setter Property=”Visibility” Value=”Collapsed”>Setter>

                                            <Style.Triggers>

                                                <DataTrigger Binding=”{Binding IsCloseButtonVisible}“ Value=”True”>

                                                    <Setter Property=”Visibility” Value=”Visible”>Setter>

                                                DataTrigger>

                                            Style.Triggers>

                                        Style>

                                    Button.Style>

                                Button>

                                <DockPanel Margin=”0 20 0 20″>

                                    <Image Source=”{Binding ImagePath}“ Stretch=”None” DockPanel.Dock=”Left”>Image>

                                    <ScrollViewer MaxHeight=”500″ MaxWidth=”500″ VerticalScrollBarVisibility=”Auto” HorizontalScrollBarVisibility=”Auto” Foreground=”White”>

                                        <ContentPresenter Content=”{Binding Content}“ VerticalAlignment=”Center”>ContentPresenter>

                                    ScrollViewer>

                                DockPanel>

                            DockPanel>

                        Border>

                    Grid>

                Border>

            Border>

            <Border.Background>

                <RadialGradientBrush GradientOrigin=”0.5,0.5″ Center=”0.5,0.5″ >

                    <RadialGradientBrush.GradientStops>

                        <GradientStop Color=”#1E2D58″ Offset=”1″ />

                        <GradientStop Color=”#324169″ Offset=”0″ />

                    RadialGradientBrush.GradientStops>

                RadialGradientBrush>

            Border.Background>

            <Border.RenderTransform>

                <ScaleTransform ScaleX=”0″ ScaleY=”0″>ScaleTransform>

            Border.RenderTransform>

            <Border.Style>

                <Style TargetType=”{x:Type Border}“>

                    <Setter Property=”Visibility” Value=”Collapsed”>Setter>

                    <Style.Triggers>

                        <DataTrigger Binding=”{Binding IsVisible}“ Value=”true”>

                            <Setter Property=”Visibility” Value=”Visible”>Setter>                            <DataTrigger.EnterActions>

                                <BeginStoryboard>

                                    <Storyboard>

                                        <DoubleAnimation

 Storyboard.TargetProperty=”(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)”

 To=”1.05″

 Duration=”0:0:.15″

 DecelerationRatio=”.9″>DoubleAnimation>

                                        <DoubleAnimation

 Storyboard.TargetProperty=”(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)”

 To=”1″

 BeginTime=”0:0:.15″

 Duration=”0:0:.1″

 AccelerationRatio=”.9″>DoubleAnimation>

                                        <DoubleAnimation

 Storyboard.TargetProperty=”(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)”

 To=”1.05″

 Duration=”0:0:.15″

 DecelerationRatio=”.9″>DoubleAnimation>

                                        <DoubleAnimation

 Storyboard.TargetProperty=”(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)”

 To=”1″

 BeginTime=”0:0:.15″

 Duration=”0:0:.1″

 AccelerationRatio=”.9″>DoubleAnimation>

                                    Storyboard>

                                BeginStoryboard>

                            DataTrigger.EnterActions>

                            <DataTrigger.ExitActions>

                                            Storyboard.TargetProperty=”(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)”

                                            To=”1.05″

                                            Duration=”0:0:.1″

                                            DecelerationRatio=”.9″>

                                            Storyboard.TargetProperty=”(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)”

                                            To=”0″

                                            BeginTime=”0:0:.1″

                                            Duration=”0:0:.15″

                                            AccelerationRatio=”.9″>

                                            Storyboard.TargetProperty=”(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)”

                                            To=”1.05″

                                            Duration=”0:0:.1″

                                            DecelerationRatio=”.9″>

                                            Storyboard.TargetProperty=”(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)”

                                            To=”0″

                                            BeginTime=”0:0:.1″

                                            Duration=”0:0:.15″

                                            AccelerationRatio=”.9″>

                            –>

                            DataTrigger.ExitActions>

                        DataTrigger>

                    Style.Triggers>

                Style>

            Border.Style>

        Border>

    Grid>

Add this to your App.xaml in to get matching dialog buttons:

Code
        <ControlTemplate TargetType=”{x:Type Button}“ x:Key=”dialogButton”>

            <Border CornerRadius=”5″ BorderBrush=”#A4A9B5″ BorderThickness=”0 0 0 1″>

                <Border Padding=”20 10″ BorderBrush=”#5F6B89″ BorderThickness=”0 1 0 0″>

                    <ContentPresenter Content=”{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}” HorizontalAlignment=”{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HorizontalContentAlignment}”>

                        <ContentPresenter.Style>

                            <Style TargetType=”{x:Type ContentPresenter}“>

                                <Style.Triggers>

                                    <DataTrigger Binding=”{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}” Value=”{x:Null}“>

                                        <Setter Property=”Visibility” Value=”Collapsed”>Setter>

                                    DataTrigger>

                                Style.Triggers>

                            Style>

                        ContentPresenter.Style>

                    ContentPresenter>

                    <Border.Style>

                        <Style TargetType=”{x:Type Border}“>

                            <Setter Property=”CornerRadius” Value=”5″>Setter>

                            <Setter Property=”Background”>

                                <Setter.Value>

                                    <LinearGradientBrush StartPoint=”0,0″ EndPoint=”0,1″>

                                        <GradientStop Offset=”0″ Color=”#A4A9B5″>GradientStop>

                                        <GradientStop Offset=”.499″ Color=”#727A8E”>GradientStop>

                                        <GradientStop Offset=”.499″ Color=”#505A72″>GradientStop>

                                        <GradientStop Offset=”1″ Color=”#686F87″>GradientStop>

                                    LinearGradientBrush>

                                Setter.Value>

                            Setter>

                            <Style.Triggers>

                                <Trigger Property=”IsMouseOver” Value=”True”>

                                    <Setter Property=”Background”>

                                        <Setter.Value>

                                            <LinearGradientBrush StartPoint=”0,0″ EndPoint=”0,1″>

                                                <GradientStop Offset=”0″ Color=”#B5BBC9″>GradientStop>

                                                <GradientStop Offset=”.499″ Color=”#7E879F”>GradientStop>

                                                <GradientStop Offset=”.499″ Color=”#5F6B89″>GradientStop>

                                                <GradientStop Offset=”1″ Color=”#767F9B”>GradientStop>

                                            LinearGradientBrush>

                                        Setter.Value>

                                    Setter>

                                    <Setter Property=”Cursor” Value=”Hand”>

                                    Setter>

                                Trigger>

                            Style.Triggers>

                        Style>

                    Border.Style>

                Border>

            Border>

        ControlTemplate>

After copying this code over, you should have a functioning iPhone dialog box. I purposely commented out a dropshadow for the window as it was causing some diagonal tearing during and after the dialog’s pop-in animation.

Renew ClickOnce Certificates without Prompting User to Install

kham — Sun, 11 Mar 2012 17:31:36 +0000

If you’ve deployed a ClickOnce project using the default autogenerated key, you’ll find that it will expire a year later forcing you to redeploy your solution with a new key. This will force your users that are on automatic updates to confirm the download, which may be undesirable.

Microsoft’s solution is to hand you the C++ source code to renew the certificate and let you compile it yourself. Unfortunately, several people have pointed out that the source code they provide doesn’t compile.

Here’s a version of RenewCert that is ready to use:

RenewCert

To use, open up the command prompt and type the following:

renewcert[optional]Example: renewcert oldcert.pfx newcert.pfx “CN=MyNewCert” MySuperSecretPassword

Glossy Gradient XAML Generator

admin — Fri, 19 Nov 2010 22:43:21 +0000

In my ongoing effort to mock the Office 2007 UI, I wrote this XAML gradient generator:

This tool changes the brightness and saturation of a given color, so, for best results, try to choose a color that isn’t maxed out (255) in either brightness or saturation.

Download

Force WPF to Use Windows 7/Aero Theming in Classic Mode

admin — Fri, 12 Nov 2010 11:03:00 +0000

I had just finished a WPF project with some custom controls that mesh well with the default Win7/Vista theme only to find that switching to classic mode made my application look terrible.

Uhh no…

Since our users are running Windows XP in classic mode, this clearly needed to be fixed. Luckily, we can force WPF to use Aero theming in classic mode with just a little bit of code.

First, add a reference to PresentationFramework.Aero:

Next, reference it in your App.xaml:

Code
<Application x:Class="Test.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Startup="Application_Startup">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="/PresentationFramework.Aero;component/themes/Aero.NormalColor.xaml" />
             ResourceDictionary.MergedDictionaries>
         ResourceDictionary>
     Application.Resources>
 Application>

Much better…

Add Outer Glow to WPF Controls on Focus (Like Gmail)

admin — Fri, 29 Oct 2010 15:42:40 +0000

Adding a focus indicator to your controls can help make your application more user friendly and can provide a bit of visual polish for your projects. Ultimately, we are trying to mimic the following look in WPF:

To create this, we make a style that targets any control and give it a name:

Code
<Style x:Key="HighlightOnFocus" TargetType="Control">
     <Style.Triggers>
         <Trigger Property="IsFocused" Value="True">
             <Setter Property = "BitmapEffect" >
                 <Setter.Value>
                     <OuterGlowBitmapEffect 
                         GlowColor="Orange" 
                         GlowSize="5" />
                 Setter.Value>
             Setter>
         Trigger>
     Style.Triggers>
 Style>

Then, set your control to use this style:

Code
<Style TargetType="TextBox" BasedOn="{StaticResource HighlightOnFocus}">
 Style>

Result:

Developing a Cost Effective Wireless Data Entry System (Master’s Project)

kham — Mon, 24 Nov 2008 22:58:40 +0000

This paper looks at the design and implementation of a wireless data entry system using cheap and widely available personal digital assistants (PDAs) as a hardware platform. This problem is viewed through the context of a small transportation company that is transitioning to a medium-large scale operation and needs a custom tailored solution to improve payroll efficiency and reduce errors. In my report, I detail the design considerations, the user stories, and the pitfalls that come with implementing a new system that interfaces with existing applications.

View Full Album

My complete Master’s report and presentation used in my defense can be downloaded below.

Download report: Developing a Cost Effective Wireless Data Entry System

Download presentation: Developing a Cost Effective Wireless Data Entry System

Texas A&M University – Kingsville Computer Science Website

kham — Fri, 21 Nov 2008 20:00:51 +0000

TAMUK CS Website

Main Website Template:

Teacher Website Template:

Tahoe Trucking Website

kham — Mon, 10 Nov 2008 21:12:53 +0000

This site was designed using a completely custom wordpress theme. The logo was completely redesigned and the header image was shot over the course of a few days and stitched together using Photoshop. Since this site was implemented with wordpress, the customer can edit the content like a Word document with no HTML knowledge required.

Site link: TahoeTrucking.com

DoveCom Website

kham — Mon, 10 Nov 2008 21:05:18 +0000

This site was a blank slate as far as projects go. While working for Integrity Communications, I was asked to create a website for a sister company called DoveCom that, at the time, had no logo, content, or identity of any kind.

With this in mind, I created a logo and layout that reflected the company’s name while at the same time using a few design trends of the time like reflections, gradients, and darker colors.

DiffTool

kham — Mon, 10 Nov 2008 20:55:35 +0000

This tool allows you to compare any two text files and view the changes. It has two resizable panes and leverages the power of HTML and CSS for the display window styles. It also has a numbered code line, so you can compare code a little easier.

Download File – DiffTool