Creativity expression

Posts Tagged ‘UI’

Hi guys, back again with a question more than a post. Last few days I’ve played a little with Silverlight Toolkit and a question came out with Transitioning Content Control in the Toolkit: “is it useful???”.

What the content Control does i to show with a nice transition an element (e.g. from a list), but without showing the others.

Below the example that you can try:

I think that it’s stressful for a user don’t see what’s next element and what’s the previous one at least. It may be need something more. Let’s see anyway how to use it

First of all add a reference of Silverlight layout toolkit to your project

Then add the reference into XAML (i called it layoutToolkit):

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit" x:Class="TransitionContentExample.MainPage"
    d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">

      <layoutToolkit:TransitioningContentControl
        x:Name="_transitionControl"
        Content="TransitioningContentControl"/>

    </Grid>
</UserControl>

Now we need a little template to display data, really easy template, with a soft shadow to make it look a little better:

<layoutToolkit:TransitioningContentControl
            x:Name="_transitionControl"
            Content="TransitioningContentControl">

            <!--Add a little effect-->
            <layoutToolkit:TransitioningContentControl.Effect>
                <DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="10" Direction="315"/>
            </layoutToolkit:TransitioningContentControl.Effect>

            <!--Add a little template. Change the template with something interesting  -->
            <layoutToolkit:TransitioningContentControl.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <Rectangle Width="200" Height="180" RadiusX="10" RadiusY="10" Fill="BlueViolet"/>
                        <TextBlock Text="{Binding}" FontSize="15" Foreground="White" FontWeight="Bold"
                                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </layoutToolkit:TransitioningContentControl.ContentTemplate>

        </layoutToolkit:TransitioningContentControl>

And now we need to write a little C# code to make it work.

Lets create a list of strings that will be passed as a content and displayed in the textblock (since it has a Binding) we can do it easily.

private List<String> _fakeItems = new List<string>();
        public MainPage()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < 20; i++)
            {
                _fakeItems.Add("Something " + i);
            }

            //assign the first element immediately
            _transitionControl.Content = _fakeItems[++counter];
        }

and then override the “mouse left” event to change the items:

private int counter = 0;
        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
        {
            //checks if counter will index out of range
            counter = counter + 1 == _fakeItems.Count ? 0 : counter;

            base.OnMouseLeftButtonDown(e);
            _transitionControl.Transition = "UpTransition";
            _transitionControl.Content = _fakeItems[++counter];
        }

(the link @ the src code)

As you seen nothing really difficult, but I can’t really see how to use it any suggestion?

-dave

A Marzo 2010 è stato annunciato il nuovo Windows Phone 7 (d’ora in poi WP7), il nuovo sistema mobile di casa Microsoft, e sono stato partecipe al primo seminario al livello Nazionale dove è stato presentato WP7 con XNA 4. Eravamo 2 speakers, per il Game Day, io e Giuseppe Maggiore, che rientrava quella mattina dal Mix 2010 di Las Vegas, USA.

Per il momento è disponibile solo l’emulatore e ci si può divertire con questo gioiellino di tecnologia anche in modalità virtuale! Su http://silverlight.net/getstarted/ potete trovare tutte le indicazioni per iniziare a lavorare con VS express 2010 per WP7.

Su Wp7 sono disponibili due diverse tecnologie, XNA 4 e Silverlight 4, ovviamente con una ci si scrivono i giochi e con l’altra le applicazioni .

Avere Silverlight come tecnologia di supporto alle app è una vera goduria perchè è davvero facile e da quello che sono riuscito a vedere è decentemente supportato anche da Expression Blend 4 WP7 add-in, e spero che nella versione definitiva ci sia anche SketchFlow per WP7.

Ecco una delle schermate pubblicitarie di una app per WP7, una roba che si ottiene in maniera relativamente semplice

Ma visto che siamo in tema di news, vediamo anche come iniziare a programmare su Silverlight 4 per WP7.

e non dimenticate di scaricare i codici sorgenti della demo.

-dave

Oggi io e Roby abbiamo tenuto un seminario all’università di Bari, sede Brindisi, su Mobile e User Interface 3D. Entrambi avevamo voglia di fare un seminario un po’ insolito e ci siamo trovati davanti degli studenti, non solo attentissimi, ma molti anche già preparati sul .NET. Uno studente che ha già visto .NET è mosca bianca…figuratevi circa 10-15!!! In definitiva sia il mio seminario, che quello di Roby sono stati davvero di altissimo livello, non solo perché alla fine sia io che lui abbiam fatto roba davvero complessa, che non si vede tutti i giorni, ma perché gli studenti hanno partecipato riempendoci di domande. Strepitoso. Davvero soddisfacente!

Infine, siccome Roby aveva un pc con uno schermo multi touch, la parte di Surface, cioè NUI (Natural User Interface) l’ho fatta usando il pc di Roby: improvvisato grandissimo . La difficoltà maggiore è stata adattarsi alla tastiera inglese, non trovavo mezzo comando, però quello che mostravo potevo davvero metterlo in pratica… mica male .

Un piccolo recap sull’agenda:

Dave

• User Interface: Usability & Responsiveness
• WPF con Expression Blend & Visual Studio
• Disegnare una app in WPF: Navigation Framework
• Approcciare il 3d in WPF: Fluid Kit & Outlook Contacts
• Lavorare con il 3D in WPF: componenti come texture su mesh 3D
• Surface: multi-user interface
  • Pensare in modalità multi-user
  • Creare le applicazioni per multi-user
  • Usare suoni e video
  • Menù per ogni componente

Roby

• Compact Framework
• Pensare una applicazione Mobile: le risorse
• Creare una semplice applicazione mobile
• Creare un installer e uninstaller con test sul device reale
• Sfruttare servizi mobile, per gestire chiamate ed SMS
• Creazione di una applicazione complessa: SeizeMyLife

Ecco il link al blog di Roberto

Il link per scaricare i codici sorgenti  (surface  & WPF ) & slides

Commenti sono sempre ben accetti!

-dave

Ciao ragazzi, condivido con voi le mie slides su Microsoft Surface e i miei codici del dotnet campus, evento del 13 Marzo 2010 a Roma.

www.dotnetcampus.it

Link alle slides

Link ai codici sorgenti

-dave

One of the most important objectives in every program is to try to have reusable code. In Expression Blend it’s a little tricky to create a Panel that holds components and arrange them visually in a custom way: so what we want to create in this tutorial is a custom Panel that we can reuse in Expression Blend 3.

Let’s start with the main idea, which can be anything: we…we…well…let me think (….10 mins later), uh right as shown in the blend example, we want to put all elements in circle around the center.

What we need is to define a new class and derive it from Panel. (I’m inserting line numbers so it’s easy to read, all source code it’s @ the end )

   1:  using System;

   2:  using System.Collections.Generic;

   3:  using System.Linq;

   4:  using System.Text;

   5:  using System.Windows.Controls;

   6:   

   7:  namespace uidev.Panels

   8:  {

   9:      public class CircularMenuPanel : Panel

  10:      {

  11:   

  12:      }

  13:  }

Then we need a method to refresh the view when we insert the elments, and use it with a little trick: a call from Dependency Properties, so when a parameter has been changed the property calls the method.

1. Add a private Refresh() method
2. Add a static void method that calls the Refresh() method
3. Add a Dependency Property that calls the static void method
4. Add a variable that the Dependency Property refers to

   1:   public class CircularMenuPanel : Panel

   2:      {

   3:          //step 3

   4:          public static readonly DependencyProperty RadiusProperty =

   5:              DependencyProperty.Register("Radius", typeof(double), 

   6:              typeof(CircularMenuPanel),

   7:              new PropertyMetadata(CircularMenuPanel.RadiusChanged));

   8:   

   9:          //step 2

  10:          private static void RadiusChanged(DependencyObject sender, 

  11:              DependencyPropertyChangedEventArgs e)

  12:          {

  13:              ((CircularMenuPanel)sender).Refresh();

  14:          }

  15:   

  16:          //step 4

  17:          public double Radius

  18:          {

  19:              get { return (double)GetValue(RadiusProperty); }

  20:              set { SetValue(RadiusProperty, value); }

  21:          }

  22:   

  23:          // step 1

  24:          private void Refresh()

  25:          { 

  26:          

  27:          }

  28:      }

Now when you change the Radius variable, the DependencyProperty “RadiusProperty” listens the changes and updates RadiusChanged that calls Refresh().

Now we want that each time a element is added we ensure enough space, so we have to override MeasureOverride and ArrangeOverride. In addiction we can, it’s up to us, animate each element added…just to make thing more interesting.

   1:          protected override Size MeasureOverride(Size availableSize)

   2:          {

   3:              Size resultSize = new Size(0, 0);

   4:   

   5:              foreach (UIElement child in this.Children)

   6:              {

   7:                  child.Measure(availableSize);

   8:                  resultSize.Width = Math.Max(resultSize.Width, 

   9:                      child.DesiredSize.Width);

  10:                  resultSize.Height = Math.Max(resultSize.Height, 

  11:                      child.DesiredSize.Height);

  12:              }

  13:   

  14:              resultSize.Width =

  15:                  double.IsPositiveInfinity(availableSize.Width) ?

  16:                  resultSize.Width : availableSize.Width;

  17:   

  18:              resultSize.Height =

  19:                  double.IsPositiveInfinity(availableSize.Height) ?

  20:                  resultSize.Height : availableSize.Height;

  21:   

  22:              this.Animate();

  23:   

  24:              return resultSize;

  25:          }

  26:   

  27:          protected override Size ArrangeOverride(Size finalSize)

  28:          {

  29:              this.Refresh();

  30:              return base.ArrangeOverride(finalSize);

  31:          }

  32:   

  33:          private void Animate()

  34:          {

  35:              int AnimationDuration = 200;

  36:              int index = 0;

  37:              foreach (FrameworkElement element in this.Children)

  38:              {

  39:                  element.Opacity = 0;

  40:                  int time = AnimationDuration * (index + 1);

  41:   

  42:                  DoubleAnimation opacityAnimation = new DoubleAnimation();

  43:                  opacityAnimation.From = 0;

  44:                  opacityAnimation.To = 1;

  45:                  opacityAnimation.BeginTime = new TimeSpan(0, 0, 0, 0, time);

  46:                  opacityAnimation.Duration = 

  47:                      new Duration(new TimeSpan(0, 0, 0, 0, AnimationDuration));

  48:   

  49:                  element.BeginAnimation(FrameworkElement.OpacityProperty, 

  50:                      opacityAnimation);

  51:                  index++;

  52:              }

  53:          }

The last thing to do is to implement Refresh() method.

We can subdivide the actions taken in this method:

1. Check if the width/height are NaN (Not a Number = not set)
2. Iterate through each element in the Panel
3. Calculate a transform (in this case a Rotation) for each element
4. Check if the desired width/desired height are NaN
5. Apply Arrange method to the element

   1:          private void Refresh()

   2:          {

   3:              int count = 0;

   4:              int initialAngle = 0;

   5:              int angleItem = 30;

   6:              if (double.IsNaN(this.Width))

   7:              {

   8:                  this.Width = 200;

   9:              }

  10:              if (double.IsNaN(this.Height))

  11:              {

  12:                  this.Height = 200;

  13:              }

  14:   

  15:              foreach (FrameworkElement element in this.Children)

  16:              {

  17:                  RotateTransform r = new RotateTransform();

  18:                  r.CenterX = 0;

  19:                  r.CenterY = 0;

  20:                  r.Angle = (angleItem * count++) - initialAngle;

  21:                  element.RenderTransform = r;

  22:                  double x = this.Radius * Math.Cos(Math.PI * r.Angle / 180);

  23:                  double y = this.Radius * Math.Sin(Math.PI * r.Angle / 180);

  24:   

  25:                  if (!(double.IsNaN(this.Width)) && !(double.IsNaN(this.Height)) 

  26:                      && !(double.IsNaN(element.DesiredSize.Width)) 

  27:                      && !(double.IsNaN(element.DesiredSize.Height)))

  28:                  {

  29:                      element.Arrange(new Rect(x + this.Width / 2 - r.CenterX, 

  30:                          y + this.Height / 2 - r.CenterY, element.DesiredSize.Width, 

  31:                          element.DesiredSize.Height));

  32:                  }

  33:              }

  34:          }

Note that element.Arrange is what let the visual element refresh the Blend view! So it’s basically the core method.

The final step is to make Blendize it, so we can manipulate its properties as  we do with all others components/panels. To do this we add a custom category, just up the Radius variable, and all other variables we are going to create.

   1:          [Category("Circular Menu")]

   2:          public double Radius

   3:          {

   4:              get { return (double)GetValue(RadiusProperty); }

   5:              set { SetValue(RadiusProperty, value); }

   6:          }

We enable the Category option adding a using to our statements:

   1:  using System.ComponentModel;

So, how do I use it in Expression Blend?

Before you can use this component in Blend, you should build your solution, then open Expression Blend 3, and look into Assets and click on Project. There you’ll find all your custom Panels, as shown below:

Then click on CircularMenuPanel, the component we just created, and drag as usual

Now let’s add some components…which ones? Anything will work fine we can add buttons:

We also notice that the buttons are stretched into a really small circle and each element added gains a 30° degrees rotation. That’s what’s we specified at the Refresh’s beginning method

   1:          private void Refresh()

   2:          {

   3:              int count = 0;

   4:              int initialAngle = 0;

   5:              int angleItem = 30;//specifies the angle

   6:              .....

   7:          }

and we did not touch the Radius variable we created.

To modify the Radius, and make the circle a little bit larger we have to select the CirclularMenuPanel from “Objects and Timeline” and then go to the properties panel on the right and look for Circular Menu category:

Then modify the radius and watch what happens to your view!

The view refreshes in real time!!!!!!

Not only, each element added is animated, in this case its opacity goes from zero to 1.

That’s all folks, I really hope that you enjoyed this tutorial. Comments really appreciated, and suggestions more than everything are welcome!

As final thing the link @ the code:

-dave

 Yes Guys, new year, new stuff. We already produced tons of materials and lots news are ready to be released, so we think is time to brend our stuff. It will still Free of course, but we also need some copyrights. In few days we’ll set up a license to release with our stuff.

The idea is to try to review our style while mantaining the basic design language. This will begin with Design and will be with all material we release.

So we’ll hope that you enjoy our progress:

Code Zero Design© has lended!

-dave

Hi guys, on Tuesday 1 Dec 2009 I’ll be @ Trieste having a speech on Silverlight 3.
Everybody there seems to be so excited, and me too .

Here goes the agenda:

It’s pretty hard agenda, isn’t it…hu? For any questions do not hesitate to post comments here, I’ll be pleasured to answer you guys

-dave

Do you think that UI it’s just loosing time on software?
Do you think that UI it’s just draw some nice icons?
Should we consider UI designers apart from developers?

If you do so, you should come in Genova 18th of November to see what’s going on
You’ll discover a new world, UI design, fast algorithm to perfectly integrate your core with data. Responsiveness and creativity had never be more tied up!

Looking forward you,
-dave

Guys, these days I’m doing more slides than breathing. Slides 4 my tour, Slides for MSP’s presentation, slides for courses @ University, Slides 4 my courses @ Get Connected, slides 4 presenting Surface in Milano.
The process after awile seems quite the same, till you start sing the same song, which became your loop and you react being more creative. Well there’s not a scientific proof, but look @ this:

This is Emin3m’s Mokingbird, from Encor3 album. Nice flow, expressive words…that’s all I needed
Why I’m telling you this? Just becouse I’ve finished few minutes ago to drop down some tips how to do public presentation, and I talked about singin’ stuff. Read it @ CodeZero

-dave
p.s. comments appreciated on slides. I may release them in a near future