2011年8月26日 星期五

Expression Blend(40)-改寫Control預設的Style (Button)

本範例使用WPF專案
若希望改寫 WPF 控制項的預設Style,以Button為例
  • 在window中加一個Button
  • 建立Style
image
  • Apply to all
image
  • 在Style編輯畫面,設B(粗體),I (斜體)與字型大小
image
  • 回到Window
image
  • 產生的XAML參考如下
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication3.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>
   
        <Style TargetType="{x:Type Button}">
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontStyle" Value="Italic"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>
   
    </Window.Resources>
    <Grid x:Name="LayoutRoot">
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="72" Margin="24,24,0,0" VerticalAlignment="Top" Width="96"/>
    </Grid>
</Window>
  • 後續加Button到Window時,就會自動套用Style

2011年8月24日 星期三

XAML 2009

.NET Framework 4已經支援XAML 2009規範,但是目前的Visual Studio 2010 SP1與 Microsoft Expression Blend 4工具並不支援,目前你可以使用Loose XAML檔來撰寫支援XAML 2009語法的WPF程式。
XAML 2009 語言功能,可以參考 MSDN
底下介紹一個簡單範例,在過去使用XAML 2006時,若要使用CLR中的string型別,我們必需撰寫以下程式,引用clr-namespace:System命名空間
<StackPanel   
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
  <StackPanel.Resources>
        <sys:String x:Key="myData">WPF</sys:String>     </StackPanel.Resources>  
         <Label Content="{StaticResource myData}" ></Label>      
</StackPanel>
若是使用XAML 2009,則可改為如下,注意StackPanel引用了XAML 2009規範

  <StackPanel.Resources>
        <x:String x:Key="myData">WPF</x:String>     </StackPanel.Resources>  
         <Label Content="{StaticResource myData}" ></Label>      
</StackPanel>

WPF- Loose XAML Files

在WPF中你可以只建立XAML檔案,但不要建立任何程式碼,稱之為Loose XAML檔案。Loose XAML可以直接以IE開啟(要裝.NET Framework 3以上版本)。若有包含程式碼,就不可用IE開啟,要改用Browser base的WPF應用程式。
Loose XAML Files特色
  • 是一個附檔名為 XAML檔案
  • 沒有相關聯的code-behind檔案
  • 不會編譯成一個應用程式
例如有一個Loose XAML Files,檔案內容如下:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >
<StackPanel Margin="10" Width="150">
    <Label>Label</Label>
    <TextBox>TextBox</TextBox>
</StackPanel>
</Page>
這種類型的檔案,可以直接載入IE瀏覽器,在載入瀏覽器開啟後執行結果;
image
Loose XAML Files 限制
  • 根節點不可以是Window,可以是Page、Viewbox…等,例如
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >
<StackPanel Margin="10" Width="150">
    <Label>Label</Label>
    <TextBox>TextBox</TextBox>
</StackPanel>
</Viewbox>
  • 根節點要定義必要的命名空間
  • Element不能有事件處理常式
  • 不是所有瀏覽器都支援

2011年8月11日 星期四

Expression Blend(39)-繫結到Observable Collection

本範例使用WPF專案
若有一個 Observable Collection定義如下,要將其繫結到ListBox
class BookList : ObservableCollection<Book> {
        public BookList ( )
            : base ( ) {
            Add ( new Book { Title = "Learning ASP.NET" , Price = 590 } );
            Add ( new Book { Title = "Learning VB" , Price = 490 } );
            Add ( new Book { Title = "Learning C#" , Price = 600 } );
            Add ( new Book { Title = "Learning Blend" , Price = 500 } );
        }
    }
    class Book {
        public string Title { get; set; }
        public int Price { get; set; }
    }
  • 加一個ListBox
  • Create Object Data Source
image
  • 選BookList
image
  • Bind
image
  • 效果如下
image
  • 編輯Data Template
image
  • 修改StackPanel Orientation
image
  • 使用拖曳方式,調整TextBlock順序
image
  • 加個TextBlock到Template
image
參考XAML如下
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication7" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    x:Class="WpfApplication7.Window1"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480">
    <Window.Resources>
        <local:BookList x:Key="BookListDataSource" d:IsDataSource="True"/>
        <DataTemplate x:Key="BookTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Title}"/>
                <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text=" - "/>
                <TextBlock><Run Text="590"/></TextBlock>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource BookListDataSource}}">
        <ListBox x:Name="listBox" Height="144" Margin="168,40,0,0" VerticalAlignment="Top" ItemTemplate="{DynamicResource BookTemplate}" ItemsSource="{Binding}" HorizontalAlignment="Left" Width="144"/>
    </Grid>
</Window>

2011年8月10日 星期三

Expression Blend(38)-類別範例資料


本範例使用WPF專案,在設計階段繫結到範例資料
在設計階段WPF專案包含一個MyData  Class

class MyData {
       public Brush ColorName { get; set; }
   }

若有一個Button的Background要繫結到MyData的ColorName,可以
  • 建立範例資料
image
  • 選Class
image
  • 編輯資料
image
  • 設ColorName
image
  • 將Button的Background繫結到MyData的ColorName
image
image
  • 完成XAML如下
<Window
    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"
    x:Class="WpfApplication3.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Grid x:Name="LayoutRoot" d:DataContext="{d:DesignData /SampleData/MyDataSampleData.xaml}">
        <Button x:Name="button" Content="Button" Height="40" Margin="0,24,144,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="64" Background="{Binding ColorName}"/>
    </Grid>
</Window>

2011年8月9日 星期二

Expression Blend(37)-ItemsControl Template-ListBox

本範例使用WPF專案
本練習介紹設計ItemsControl,ListBox的ItemTemplate與ItemsPanelTemplate
  • 放入ListBox
  • ListBox->Add ListBoxItem
  • image
  • ListBox –>Edit Template->Create Empty 使用預設名稱即可
image
  • 進入Template設計狀態,Grid->Change Layout Type –>Border
     image
  • 使用Gradient Tools設Background
    image
  • 放入ScrollViewer, 放入ItemsPresenter, Width, Height為Auto image
  • ListBox->Edit Additional Templates->Edit Layout of Items-> Edit a Copy
  • 設VirtualizingStackPanel的Effect
    image
  • 選DropShadowEffectimage
  • 完成
image
  • 參考XAML如下
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication12.Window1"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480">
    <Window.Resources>
        <ControlTemplate x:Key="ListBoxControlTemplate1" TargetType="{x:Type ListBox}">
            <ListBox x:Name="listBox" Margin="0,0,32,-24"/>
        </ControlTemplate>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <VirtualizingStackPanel IsItemsHost="True" HorizontalAlignment="Left">
                <VirtualizingStackPanel.Effect>
                    <DropShadowEffect/>
                </VirtualizingStackPanel.Effect>
            </VirtualizingStackPanel>
        </ItemsPanelTemplate>
    </Window.Resources>
    <Grid x:Name="LayoutRoot">
        <ListBox x:Name="listBox" Height="112" Margin="256,88,248,0" VerticalAlignment="Top" Template="{DynamicResource ListBoxControlTemplate1}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}">
            <ListBoxItem Content="ListBoxItem"/>
            <ListBoxItem Content="ListBoxItem"/>
        </ListBox>       
    </Grid>
</Window>

Expression Blend(36)-Control Style與套用

一個Style可以套用到不同的Control,以下定義一個Style到用到Label與Button
  • 加一個Label
image
  • 建立Style
image
  • 設myStyle
image
  • 設Background與Foreground,然後回MainWondow
image
目前XAML看起來如下
<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="myStyle" TargetType="{x:Type Label}">
            <Setter Property="Background" Value="#FF060AF5"/>
            <Setter Property="Foreground" Value="#FFF7F1F1"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Label x:Name="label" Content="Label" Height="48" Margin="136,24,60,0" VerticalAlignment="Top" Style="{DynamicResource myStyle}"/>       
     </Grid>
</Window>
  • 加一個Label並套用
image
  • 修改Style ,移除TargetType
<Window.Resources>
        <Style x:Key="myStyle" >             <Setter Property="Control.Background" Value="#FF060AF5"/>
            <Setter Property="Control.Foreground" Value="#FFF7F1F1"/>
        </Style>
    </Window.Resources>
  • 加一個Button,Button可以套用到相同的Style
image

2011年8月5日 星期五

Expression Blend(35)-套用Control Template

此範例使用Silverlight類型專案

Control  Template套用的方式有三種,第一種稱Inline Template,例如要為Button建立Inline Template可以在Expression Blend

image

接著便會建立Inline Template,產生以下XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightApplication14.MainPage"
    Width="640" Height="480">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="56" Margin="224,64,0,0" VerticalAlignment="Top" Width="96">
            <Button.Template>
                <ControlTemplate TargetType="Button"/>
            </Button.Template>
        </Button>
    </Grid>   
</UserControl>

接著就可以利用Blend幫Button自訂Template,例如加一個Border與ContentPresenter

image

設計出的Inline Template看起來如:

<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="56" Margin="224,64,0,0" VerticalAlignment="Top" Width="96">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border>
                        <ContentPresenter/>
                    </Border>
                   </ControlTemplate>
            </Button.Template>
        </Button>

第二種套用Control Template的方式是,將Template定義成Resource

image

取一個名稱

image

同樣可以利用Blend設計,

image

產生的XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightApplication14.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
       <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
            <Grid Height="75">
                <Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top">
                    <ContentPresenter/>
                </Border>
            </Grid>
       </ControlTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Template="{StaticResource ButtonControlTemplate1}"/>
    </Grid>   
</UserControl>

第三種是使用Style,建立方式

image

取一個名稱

image

預設會產生Style,預設Style定義與套用語法如下

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightApplication14.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
   
       <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Background" Value="#FF1F3B53"/>
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                                            <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                                            <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
                                <Grid Background="{TemplateBinding Background}" Margin="1">
                                    <Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
                                    <Rectangle x:Name="BackgroundGradient">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                                <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Grid>
                            </Border>
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
                            <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
   
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Style="{StaticResource ButtonStyle1}"/>
    </Grid>   
</UserControl>

2011年8月4日 星期四

Expression Blend(34)-還原文件狀態

在使用Blend時,Blend常會記住你最近的行為,例如在Artboard畫了一個Retangle將其Fill成藍色後,在Artboard畫第二個矩型時(下方),就會自己幫你填成藍色。
image
你可以在畫第二個Retangle之前,先關閉目前編輯的文件
image
再開啟之,Blend就會忘掉之前的設定,畫二個Retangle時,就會回到預設值
image

Expression Blend(33)-Color Resource

Color Resource可以讓你重複套用相同顏色到不同的項目

  • 建立一個Silverlight或WPF AP
  • 加一個Retangle
  • 設定Fill選一個顏色,然後從Editor-> Advanced Options->Convert to New Resource

image

  • 取一個名稱

image

  • 若有一個圓型,Fill漸層色。可以選取Color Resource作套用

image

  • 套用後效果

image

  • 以後若想要將顏色換掉,可以直接從Resouces頁,選新顏色。所有之前套用Color Resource的項目都會一致地套用成新顏色

image

Expression Blend(32)-PathListBox繫結

若我們想要讓文字隨著一條線排列,可以

  • 建立一個Silverlight應用程式
  • 使用Pen畫出線段

image

  • 加一個TextBlock,輸入文字

image

  • 將Pen畫出的項目轉成Layout path,Objects and timeline會多一個PathListBox出來

image

  • 設定PathListBox的ItemsSource繫結到TextBlock的Text

image

  • 選TextBlock

image

  • 選Text

image

  • 最後再調整一下PathListBox的Layout Paths相關屬性就行了。

image

總瀏覽量