XAMLバインディング

XAMLバインディングの例をメモします。

重要なのは Binding 構文を使うと、DataContext プロパティに入っている情報を色々なプロパティの値として利用したり、ツリー構造を遡って自分の親コンテナーの DataContext プロパティに入っている情報を表現することができます。

<Grid DataContext="Pink">
    <!-- 親コントロールの DataContext プロパティの値を背景色に利用 -->
    <TextBox Height="24" Name="textBox1" Width="120"
             Text="あいうえお"
             Background="{Binding RelativeSource={RelativeSource AncestorLevel=1, AncestorType=Grid}, Path=DataContext}" Margin="192,78,190,209" />
    <!-- 自分自身の DataContext プロパティの値（ABC）の長さを Text プロパティに表示 -->
    <TextBox Height="24" Margin="192,124,190,0" Name="textBox2" VerticalAlignment="Top" Width="120"
             DataContext="ABC" Text="{Binding Length}"
             />
</Grid>

INotifyPropertyChanged サンプル

INotifyPropertyChanged インターフェイスを実装するサンプルです。
ボタンクリックのタイミングでデータを書き換えます。変更通知により UI 側にも変更内容が反映されます。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBox Height="23" HorizontalAlignment="Left"
                 Margin="18,29,0,0" Name="textBox1"
                 VerticalAlignment="Top" Width="207"
                 Text="{Binding Path=ProductName}"
                 />
        <Button Content="Click to change data!"
                Height="23"
                HorizontalAlignment="Left"
                Margin="18,93,0,0" Name="button1"
                VerticalAlignment="Top"
                Width="207" Click="button1_Click"
                />
    </Grid>
</Window>

public partial class MainWindow : Window
{
    Product p;

    public MainWindow()
    {
        InitializeComponent();

        // Create Banana
        p = new Product("Banana");
        this.DataContext = p;
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        var p2 = this.DataContext as Product;

        // Change product to Orange
        p2.ProductName = "Orange";
    }
}

public class Product : INotifyPropertyChanged
{
    private string name;

    public event PropertyChangedEventHandler PropertyChanged;

    public Product(string value)
    {
        this.name = value;
    }

    public string ProductName
    {
        get { return name; }
        set
        {
            name = value;

            OnPropertyChanged("ProductName");
        }
    }

    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

描画時のチラツキを抑制

.NetFramework アプリケーションを開発しているとコントロール描画時にちらつくことがありますが、
なんとこのチラツキを抑えてくれるプロパティがありました。しかも、CLR2.0 から！

こちら↓

DoubleBuffered プロパティ
http://msdn.microsoft.com/ja-jp/library/system.windows.forms.control.doublebuffered%28v=vs.80%29.aspx

方法 : フォームとコントロールのダブル バッファリングを行うことによってグラフィックスのちらつきを軽減する
http://msdn.microsoft.com/ja-jp/library/3t7htc9c%28v=vs.80%29.aspx

コントロールがちらつくってめったに起きませんが、今度出会った時にはぜひ DoubleBuffered を使ってみたいです。

マウスカーソルが変わらないときは

マウスカーソルの形を司るプロパティとして、Cursor プロパティがあります。
FrameworkElement クラスのメンバです。これでマウスカーソルが十字のアイコンになります。

public MainWindow()
{
    InitializeComponent();

    // こんな感じ
    this.Cursor = Cursors.Cross;
}

ただ、この設定では時々マウスカーソルがデフォルトのアイコンに なることがあります。例えば ComboBox のリストアイテム上にマウスカーソルを持っていった時とか・・・。

マウスカーソルの形をなんとしてでも決めておきたい場合には不便です。 こんな時には、Mouse.OverrideCursor プロパティを使います。 このプロパティはアプリケーション全体で使うマウスカーソルの指定ができます。

public MainWindow()
{
    InitializeComponent();

    //this.Cursor = Cursors.Cross;
    // 代わりにこんな感じ
    Mouse.OverrideCursor = Cursors.Cross;
}

マウスカーソルの形を変えられない、元に戻ってしまう！という時は Mouse.OverrideCursor を使ってみてください。

MSDN - Mouse.OverrideCursor プロパティ

GridView にヘッダのみ表示

ASP.NET GridView（.NET Framework 4.0） はデフォルトでは空データとバインドしてもヘッダが表示されません。
空データとバインドしてもヘッダを表示するには、ShowHeaderWhenEmpty プロパティを有効にします。

↓こんな感じです。

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 空データでもヘッダを表示する
        this.GridView1.ShowHeaderWhenEmpty = true;

        DataTable dt = new DataTable();

        // 列の定義
        dt.Columns.Add("Column1");
        dt.Columns.Add("Column2");
        dt.Columns.Add("Column3");

        // 行データは設定しない
        //dt.Rows.Add("", "", "");

        // 列定義だけを持つ DataTable を参照
        this.GridView1.DataSource = dt;
        this.GridView1.DataBind();
    }
}

MSDN - GridView.ShowHeaderWhenEmpty プロパティ

EventTrigger の利用例

EventTrigger の利用例です。

ここでは
①ボタンをクリックしたタイミングで Wave ファイルを再生
②マウスホバー中はボタンを高く、ホバーをやめるとボタンの高さを戻す


Storyboard を使うときは BeginStoryboard も一緒に使います～。

<Window x:Class="EventTrigger.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <SoundPlayerAction Source="beach.wav"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="300" Duration="0:0:2" 
                                             Storyboard.TargetProperty="Height" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:2" 
                                             Storyboard.TargetProperty="Height" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Button" Height="23" Name="button1" Width="75" />
    </Grid>
</Window>

参考：EventTrigger クラス

IIS に Web サイトを配備する方法

IIS に Webサイト を配備する方法をメモしておきます。




 １．Web サイトの発行

VisualStudio で Web サイトを作成したら任意の場所にコピーします。

↓　「Web　サイトの発行」 を選択
 









↓　「対象の場所」を指定します。

OK をクリックすると、指定した場所に Web サイトアプリケーションがコピーされます。
これで Web サイトの準備が完了です。


２．IISにアプリケーションを追加
引き続き、IIS マネージャーを使って IIS にアプリケーションを追加していきます。

↓　「Default Web Site」　→　「アプリケーションの追加...」 を選択します。

↓　エイリアスに適当な名前をつけます。物理パスは先程 Web サイトをコピーした場所を指定します。

 これで IISに Web サイトを配備できました。


３．Web サイトを開く

↓　配備したアプリケーションの「アプリケーションの管理」　→　「参照」をクリックします。

そうするとブラウザが立ち上がり、アプリケーションが表示されます。

ItemsControl にデータを表示

ItemsControl はリスト形式でデータを表現することができます。
ListBox や DataGrid コントロールはこの ItemsControl を継承しています。

今回は、シンプルに ItemsControl にリストデータを表示します。ListBox や DataGrid にリストデータを表示するときも同じアプローチで大丈夫です。

XAML（ユーザーインターフェース）

<ItemsControl Name="itemsControl1"
              ItemsSource="{Binding}"
              DisplayMemberPath="Name"/>

C#（データ）

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        ObservableCollection<DataClass> data = new ObservableCollection<DataClass>();
        data.Add(new DataClass { Name = "Kai" });
        data.Add(new DataClass { Name = "Makino" });
        data.Add(new DataClass { Name = "Takashi" });
        this.DataContext = data;
    }
}

class DataClass
{
    public string Name { get; set; }
}

WPF アプリケーションパフォーマンス

WPF アプリケーションを開発していて、クライアントによって極端にパフォーマンスが下がることがあります。調べてみると、色々要因はあるようですが、古いビデオドライバなためにハードウェアレンダリングできなくて、ソフトウェアレンダリングするからっていうのがありました。

グラフィックスの描画層
http://msdn.microsoft.com/ja-jp/ms742196.aspx
→　「描画層の定義」に説明が。ハードウェアレンダリングはここを・・・。

しかも、.NET Framework 4 では DirectX 7.0 や 8.0 のグラフィックカードではソフトウェアレンダリングになるらしい・・・。





他にもこういうところを読みました ↓

ハードウェアアクセラレーション
http://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%BC%E3%83%89%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%A2%E3%82%AF%E3%82%BB%E3%83%A9%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

Software Rendering Usage in WPF（英語）
http://blogs.msdn.com/b/jgoldb/archive/2010/06/22/software-rendering-usage-in-wpf.aspx

Important FAQ questions for WPF and Silverlight - How does hardware acceleration work with WPF?（英語）
http://www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight#How%20does%20hardware%20acceleration%20work%20with%20WPF

WPF コントロールにツールチップを表示

WPF のコントロールにツールチップを表示するには、FrameworkElement クラスの Tooltip プロパティを使います。 Object 型なので、単純なテキスト以外にも色々なオブジェクトを配置することができます。 ２つ目の Button コントロールでは、ツールチップに TextBlock を入れて折り返し表示してみました。

<Button Content="マウスをホバーして" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="195">
    <ToolTipService.ToolTip>
        <ToolTip Content="簡単なツールチップ"/>
    </ToolTipService.ToolTip>
</Button>
<Button Content="マウスをホバーして" Height="23" HorizontalAlignment="Left" Margin="10,43,0,0" Name="button2" VerticalAlignment="Top" Width="195">
    <ToolTipService.ToolTip>
        <TextBlock Text="折り返し表示するツールチップ-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------折り返し表示するツールチップ" TextWrapping="Wrap"/>
    </ToolTipService.ToolTip>
</Button>

MSDN - FrameworkElement.ToolTip プロパティ
http://msdn.microsoft.com/ja-jp/library/system.windows.frameworkelement.tooltip%28v=vs.100%29.aspx