Blog Archive

Wednesday, May 21, 2008

Tilt User Interface for eye-ball



Before WPF, UI is layed out on a flat plane, limiting the number of UI elements. Some information just need eye-ball and therefore can be tilted to save space.
Here is the code to do that using SkewTransform:


<Grid Margin="8,-73,0,0" Name="grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<DockPanel Margin="8,190,0,28" Name="viewbox1">

<Image Source="c:\working\1.jpg" Margin="0,0,0,0" Name="image1" Height="163" VerticalAlignment="Top" Width="141" />
<TextBox Height="164" Margin="14,0,16,64" Name="textBox1" VerticalAlignment="Bottom" />

<DockPanel.RenderTransform>
<SkewTransform AngleX="0" AngleY="-40" />
</DockPanel.RenderTransform>
</DockPanel>
<ListBox Grid.Column="1" Margin="0,73,0,29">
<ListBoxItem>1</ListBoxItem>
<ListBoxItem>2</ListBoxItem>
<ListBoxItem>3</ListBoxItem>
</ListBox>
<ListBox Grid.Column="2" Margin="2,75,-2,30">
<ListBoxItem>1
<ListBoxItem>2
<ListBoxItem>3
<ListBox.RenderTransform>
<SkewTransform CenterX="0" CenterY="0" AngleX="0" AngleY="40" />
</ListBox.RenderTransform>
</ListBox>

No comments: