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 動態網站的功能了嗎???

張貼者： 於 2 則留言:

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

張貼者： 於 2 則留言:
標籤：

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   
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:v4=http://schemas.microsoft.com/netfx/2009/xaml/presentation
> 
  <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>
這種類型的檔案，可以直接載入ＩＥ瀏覽器，在載入瀏覽器開啟後執行結果；
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>

張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)

總網頁瀏覽量