2011年12月28日 星期三

ASP.NET 4.5 MVC新範本


Visual Studio 11 Developer Preview為ASP.NET 4.5 MVC提供新範本,可以使用Razor語法建立View
  • 建一個專案
image
  • 選用Razor
image
建立專案後,預設Index View中就使用了Razor 語法
image
按F5便可執行範例站台
image

2011年12月19日 星期一

VS 11 Razor語法支援

Visual Studio 11 Developer Preview建立網站程式時,可以透過新的View引擎來撰寫網頁。例如在Visual Studio 11 Developer Preview建立網站時,直接選取支援Razor語法的範本:

image

建立Razor語法的網頁,附檔名是cshtml (本例採用C# 專案),在專案中可以加入支援Razor的網頁範本;

image

直接寫一個簡單的Razor網頁吧,在chhtml檔案中,body部分,宣告一個字串變數,Razor語法是以@符號開始。網頁希望顯示 Hello字串和變數name串接的字串

image

執行網頁時可以看到以下結果

image

2011年12月8日 星期四

ie9 文件模式

在Windows Server 2008 R2的機器上,安裝了ie9,卻發現雖然加上Html5的DOCTYPE宣告,但ie9無法正確識別JSON物件:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title> 
    <script type="text/javascript">        
        var obj = JSON.parse('{"ID":"1" , "Name":"Mary"}');
        alert(obj.ID + "," + obj.Name);
    </script>
</head>
<body>
</body>
</html>

因此當網頁執行時,便會出現錯誤,不認識JSON物件;

image

按F12開啟開發工具,發現ie的文件模式被設定為 IE7標準image

最後在<Head> </Head>之間加上以下設定

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

這樣ie9才會正常以標準模式來執行,解決這個問題。

2011年10月13日 星期四

下一版不提供 ASP.NET Dynamic Data LINQ to SQL 動態網站的功能了嗎???

 

在 Visual Studio 2010 建立ASP.NET Dynamic Web Site時有兩種選擇:

image

但在Visual Studio 11 Developer Preview中只看得到一種選項:

image

這意味著,下一版不提供 ASP.NET Dynamic Data LINQ to SQL 動態網站的功能了嗎???

2011年10月5日 星期三

Visual Basic 匿名方法

 

Visual Basic 終於支援匿名方法

Module Module1
    Sub Main()
        Dim nameList = Function() As String
                           Return "Hi"
                       End Function
        Console.Write(nameList())
    End Sub
End Module

2011年9月30日 星期五

Visual Studio 2011 Developer Preview

 

原本以為安裝很困難,找了一台Windows Server 2008 R2的電腦三個步驟就完成了,YA!

Snap1

Snap2

Snap3

2011年9月15日 星期四

Visual Studio 2011 Developer Preview 版與.NET 4.5

根據Jason Zander Blog 指出,Visual Studio 2011 Developer Preview 版與.NET 4.5開放下載了。目前只開放有 MSDN訂閱者下載,前往下載。沒有訂閱者,在星期五(16日) 就可下載。

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>

總網頁瀏覽量