Home (Page 5)

カスタムコントロールの作り方

Posted on 2014/04/10 by twyujiro15

せっかくなのでカスタムコントロールを作る方法を少しだけ．
画面は VS2010Pro のものですが，
上位の Visual Studio もほとんど同じでしょう．
Express の場合は多分メニューにカスタムコントロールライブラリが存在しない．

まず新しいプロジェクトを追加するダイアログで
「WPF カスタムコントロールライブラリ」を選択する．

既定のテンプレートで生成してくれるファイル群は
以下のようになっていると思います．

いくらなんでも “CustomControl1” なんていうコントロール名を作る人はいないと思うので，
こんなファイルは思い切って削除します．
続いて Generic.xaml を開いてみると，
先ほど削除してしまった CustomControl1 に関する Style が記述してあるので，
こちらも削除します．

これは削除後の Generic.xaml です．

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:CustomControls">

</ResourceDictionary>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:CustomControls">

</ResourceDictionary>

ただの空っぽの ResourceDictionary です．

ようやくここからやりたいことをやります．
私の場合は LineGraph という名のコントロールを作成するので，
次のような構成になるようにファイル/フォルダを追加します．

LineGraph.cs はクラスとして追加し，/Graph/Themes/Generic.xaml はリソースディクショナリとして追加しています．
次に，一番最初に編集した /Themes/Generic.xaml を次のように編集します．

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:CustomControls">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/CustomControls;component/Graph/Themes/Generic.xaml" />
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:CustomControls">

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

こうすることで追加した /Graph/Themes/Generic.xaml が自動的に読み込まれるようになります．
次に LineGraph.cs を次のように編集します．

namespace CustomControls
{
    using System.Windows;
    using System.Windows.Controls;

    /// <summary>
    /// 折れ線グラフコントロール
    /// </summary>
    public class LineGraph : Control
    {
        #region コンストラクタ
        /// <summary>
        /// 静的なコンストラクタ
        /// </summary>
        static LineGraph()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(LineGraph), new FrameworkPropertyMetadata(typeof(LineGraph)));
        }

        /// <summary>
        /// コンストラクタ
        /// </summary>
        public LineGraph()
        {
        }
        #endregion
    }
}

namespace CustomControls

{

using System.Windows;

using System.Windows.Controls;

/// <summary>

/// 折れ線グラフコントロール

/// </summary>

public class LineGraph : Control

{

#region コンストラクタ

/// <summary>

/// 静的なコンストラクタ

/// </summary>

static LineGraph()

{

DefaultStyleKeyProperty.OverrideMetadata(typeof(LineGraph), new FrameworkPropertyMetadata(typeof(LineGraph)));

}

/// <summary>

/// コンストラクタ

/// </summary>

public LineGraph()

{

}

#endregion

}

名前空間は，このコントロールを実際に使う側のことを考慮して
シンプルに CustomControls のみとしています．
17 行目の処理が非常に重要なのですが，
ここではおまじない的に入れておきます．
続いて自分で追加したほうの Graph/Themes/Generic.xaml を次のように編集します．

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:CustomControls">

    <Style TargetType="{x:Type local:LineGraph}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:LineGraph}">
                    <TextBlock Text="かすたむっ！" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:CustomControls">

<Setter.Value>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

“local” という名前で CustomControls 名前空間を定義し，
local:LineGraph の Style を定義します．
Style とはいっても，Template に対して ControlTemplate を指定しているので，
LineGraph コントロールの外観の定義そのものということになります．
ここでは試しに TextBlock をひとつだけ置いています．

さて，
カスタムコントロールライブラリのプロジェクトだけでは，
作成したコントロールの動作確認ができません．
試しにいつものように F5 とかで実行すると次のように怒られてしまいます．

というわけで，エラー内容にもあるように，
普通の WPF アプリケーションのプロジェクトを
同じソリューションに追加します．

ソリューションエクスプローラに表示されている
ソリューションの上で右クリックして，
「追加 → 新しいプロジェクト」を選択し，
「WPF アプリケーション」を追加します．

ソリューションエクスプローラに追加された
WPF アプリケーションのプロジェクトの上で右クリックして，
「スタートアッププロジェクトに設定」を選択します．
すると，WPF アプリケーションのプロジェクトのほうが太字で表示されるようになります．

この状態で F5 を押すなどして実行すると，
CustomControls プロジェクトもビルドされますが，
実際に実行されるのは SampleApp プロジェクトのほうとなるため，
MainWindow が表示されるようになります．

この状態が確認できたら，
SampleApp プロジェクトの「参照設定」を右クリックして「参照を追加」を選択し，
「プロジェクト」タブから CustomControls を選択して，
CustomControls プロジェクトを参照するように設定します．
下図は参照の追加をした後のソリューションエクスプローラです．
参照設定ツリーの下に CustomControls があるのがわかると思います．

ここまできたらあと一息です．
MainWindow.xaml を次のように編集します．

<Window x:Class="SampleApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:custom="clr-namespace:CustomControls;assembly=CustomControls"
        Title="MainWindow" Height="350" Width="525">

    <Grid Margin="20">
        <custom:LineGraph />
    </Grid>
</Window>

<Window x:Class="SampleApp.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:custom="clr-namespace:CustomControls;assembly=CustomControls"

Title="MainWindow" Height="350" Width="525">

<custom:LineGraph />

</Grid>

</Window>

WPF デザイナが自動更新されて既に確認できているかもしれませんが，
念のため F5 を押して実行してみて下さい．
MainWindow に独自に設定した LineGraph コントロールが表示されていることが確認できます．

今後のデバッグはこのソリューションを使っておこなっていきます．
さらに別のカスタムコントロールを追加するときも，
このソリューションに追加することで簡単に対応できると思います．

以上．
思ったより長くなった…．

LineGraph という名のカスタムコントロールを作ってみるその 1

Posted on 2014/04/10 by twyujiro15

WPF でグラフ表示をするためのコントロールを自作したい．
WPF Toolkit とか使えばいいじゃんとかいうツッコミもあるかもしれないが，
結局自分の思うようなカスタマイズをするにはやっぱり自作しかない．

とりあえず折れ線グラフをターゲットとして考えているので，
カスタムコントロール名も LineGraph としています．

というわけで今回は LineGraph コントロールの構成のお話．
中見はほとんど空っぽだけど XAML で書くとこんな感じに考えています．

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:CustomControls">

    <Style TargetType="{x:Type local:LineGraph}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:LineGraph}">
                    <Grid x:Name="MainContainerGrid" Background="{TemplateBinding Background}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <!-- グラフタイトル -->
                        <TextBlock x:Name="TitleTextBlock"
                                   Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="5"
                                   Text="{TemplateBinding Title}" HorizontalAlignment="Center" />

                        <!-- 横軸ラベル -->
                        <TextBlock x:Name="XLabelTextBlock"
                                   Grid.Row="3" Grid.Column="2"
                                   Text="{TemplateBinding XLabel}" HorizontalAlignment="Center" />
                        <!-- 縦軸ラベル -->
                        <TextBlock x:Name="YLabelTextBlock"
                                   Grid.Row="1" Grid.Column="0"
                                   Text="{TemplateBinding YLabel}" VerticalAlignment="Center">
                            <TextBlock.LayoutTransform>
                                <RotateTransform Angle="-90" />
                            </TextBlock.LayoutTransform>
                        </TextBlock>
                        <!-- 第 2 主軸ラベル -->
                        <TextBlock x:Name="Y2LabelTextBlock"
                                   Grid.Row="1" Grid.Column="4"
                                   Text="{TemplateBinding Y2Label}" VerticalAlignment="Center"
                                   Visibility="{TemplateBinding IsY2AxisEnable}">
                            <TextBlock.LayoutTransform>
                                <RotateTransform Angle="-90" />
                            </TextBlock.LayoutTransform>
                        </TextBlock>

                        <!-- 横軸目盛 -->
                        <ItemsControl x:Name="XAxisItemsControl"
                                      Grid.Row="2" Grid.Column="2">
                        </ItemsControl>

                        <!-- 縦軸目盛 -->
                        <ItemsControl x:Name="YAxisItemsControl"
                                      Grid.Row="1" Grid.Column="1">
                        </ItemsControl>

                        <!-- 第 2 主軸目盛 -->
                        <ItemsControl x:Name="Y2AxisItemsControl"
                                      Grid.Row="1" Grid.Column="3">
                        </ItemsControl>

                        <!-- データ -->
                        <Grid Grid.Row="1" Grid.Column="2">
                            <!-- 境界線 -->
                            <Border BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="{TemplateBinding GraphAreaBackground}" />

                            <Canvas x:Name="GraphCanvas">
                                <!-- 目盛線 -->
                                <Path x:Name="GraphGridPath"
                                  Stroke="{TemplateBinding GridStroke}"
                                  StrokeThickness="{TemplateBinding GridStrokeThickness}"
                                  StrokeDashArray="{TemplateBinding GridStrokeDashArray}"
                                  />
                            </Canvas>
                            <ItemsControl x:Name="GraphItemsControl">
                                <!-- データ線 -->
                                <!-- データ点 -->
                            </ItemsControl>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:CustomControls">

<Setter.Value>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock x:Name="TitleTextBlock"

Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="5"

Text="{TemplateBinding Title}" HorizontalAlignment="Center" />

<TextBlock x:Name="XLabelTextBlock"

Grid.Row="3" Grid.Column="2"

Text="{TemplateBinding XLabel}" HorizontalAlignment="Center" />

<TextBlock x:Name="YLabelTextBlock"

Grid.Row="1" Grid.Column="0"

Text="{TemplateBinding YLabel}" VerticalAlignment="Center">

<TextBlock.LayoutTransform>

</TextBlock.LayoutTransform>

</TextBlock>

<TextBlock x:Name="Y2LabelTextBlock"

Grid.Row="1" Grid.Column="4"

Text="{TemplateBinding Y2Label}" VerticalAlignment="Center"

Visibility="{TemplateBinding IsY2AxisEnable}">

<TextBlock.LayoutTransform>

</TextBlock.LayoutTransform>

</TextBlock>

<ItemsControl x:Name="XAxisItemsControl"

Grid.Row="2" Grid.Column="2">

</ItemsControl>

<ItemsControl x:Name="YAxisItemsControl"

Grid.Row="1" Grid.Column="1">

</ItemsControl>

<ItemsControl x:Name="Y2AxisItemsControl"

Grid.Row="1" Grid.Column="3">

</ItemsControl>

<Border BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Background="{TemplateBinding GraphAreaBackground}" />

<Path x:Name="GraphGridPath"

Stroke="{TemplateBinding GridStroke}"

StrokeThickness="{TemplateBinding GridStrokeThickness}"

StrokeDashArray="{TemplateBinding GridStrokeDashArray}"

</Canvas>

</ItemsControl>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

まず，グラフタイトルと軸ラベルは単純に TextBlock を置いて，
依存関係プロパティを追加してバインドするようにします．

次に，軸目盛の数値は ItemsControl を利用して配置します．
ItemsSource には AxisItem という独自クラスのコレクションを指定しますが，
詳細はまた後日．

軸目盛のグリッド線も同じく ItemsControl で描画しようかとも思いましたが，
ここではひとつの Path オブジェクトで描画させます．
なのでグラフを表示する領域に Canvas を被せてそこに描画します．

データ点および点を結ぶ線については ItemsControl の中で記述できないかな～なんて考えています．

以上の構想を踏まえてグリッド線だけ描画させるとこんな感じ．

ちなみに MainWindow の XAML は下記のとおり．

<Window x:Class="CustomControlsSample.View.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:CustomControlsSample.ViewModel"
        xmlns:custom="clr-namespace:CustomControls;assembly=CustomControls"
        Title="MainView" Height="480" Width="640"
        Background="Cyan">
    <Window.DataContext>
        <vm:MainViewModel />
    </Window.DataContext>

    <Grid Margin="40">
        <custom:LineGraph Title="グラフタイトル"
                          XLabel="横軸ラベル"
                          YLabel="縦軸ラベル"
                          Y2Label="第 2 主軸ラベル"
                          IsY2AxisEnable="Visible"
                          XAxis="{Binding XAxis}"
                          YAxis="{Binding YAxis}"
                          Y2Axis="{Binding YAxis}"
                          BorderBrush="Black"
                          BorderThickness="1"
                          GraphAreaBackground="Bisque"
                          Background="LightGreen"
                          GridStroke="Red"
                          GridStrokeThickness="0.5"
                          GridStrokeDashArray="1,2"
                          />
    </Grid>
</Window>

<Window x:Class="CustomControlsSample.View.MainView"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:vm="clr-namespace:CustomControlsSample.ViewModel"

xmlns:custom="clr-namespace:CustomControls;assembly=CustomControls"

Title="MainView" Height="480" Width="640"

Background="Cyan">

<Window.DataContext>

<vm:MainViewModel />

</Window.DataContext>

<custom:LineGraph Title="グラフタイトル"

XLabel="横軸ラベル"

YLabel="縦軸ラベル"

Y2Label="第 2 主軸ラベル"

IsY2AxisEnable="Visible"

XAxis="{Binding XAxis}"

YAxis="{Binding YAxis}"

Y2Axis="{Binding YAxis}"

BorderBrush="Black"

BorderThickness="1"

GraphAreaBackground="Bisque"

Background="LightGreen"

GridStroke="Red"

GridStrokeThickness="0.5"

GridStrokeDashArray="1,2"

</Grid>

</Window>

LineGraph コントロールは Control から派生させて作成しています．
したがって，MainWindow.xaml の中の LineGraph コントロールに設定されているプロパティのうち，
BorderBrush/BorderThickness/Background 以外のプロパティは
すべて依存関係プロパティとして自分で追加したものになっています．

そろそろ長くなってきたので今回はこの辺で．
次回はグリッド線をどうやって描画しているのかを紹介しようかな．

ResourceDictionary を分割して使う

Posted on 2014/04/02 by twyujiro15

ResourceDictionary でリソースを書けるのはいいけど，
MainView では使わないけど Sub1View と Sub2View では使うものがあったりすると困る．
それにひとつの ResourceDictionary だとリソースが増えていくとやたら長くなって可読性も悪い．

というわけで ResourceDictionary を分割する方法です．
細かいネタだけど，カスタムコントロールを作るときの基本でもあるので
ここにメモしておく．

例えば色に関するリソースを Color.xaml として次のように定義する．

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <SolidColorBrush x:Key="TextColorBrush" Color="White" />
    <SolidColorBrush x:Key="BaseColorBrush" Color="#FF2D2D30" />
    <SolidColorBrush x:Key="MouseOverColorBrush" Color="#FF00ADFF" />

</ResourceDictionary>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</ResourceDictionary>

SolidColorBrush を 3 つ定義しているだけです．
このリソースを使いながら Border コントロールに関するリソースを Border.xaml として次のように定義する．

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Color.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <Style TargetType="Border">
        <Setter Property="Background" Value="{StaticResource BaseColorBrush}">
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{StaticResource MouseOverColorBrush}" />
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</Setter>

<Style.Triggers>

</Trigger>

</Style.Triggers>

</Style>

</ResourceDictionary>

ここでもう出てきてしまいましたが，
ResourceDictionary.MergedDictionaries というのが今回のメインです．
Merged とあるように，複数の ResourceDictionary を結合するときに使います．

これらの ResourceDictionary を使用する MainWindowResource.xaml を次のように定義します．

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Color.xaml" />
        <ResourceDictionary Source="Border.xaml" />
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

このように，並べて書くだけで複数の ResourceDictionary を結合できます．
そんなわけで例えばこんな MainWindow.xaml を書きます．

<Window x:Class="MergedDictionary.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>
        <ResourceDictionary Source="Resource/MainWindowResource.xaml" />
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Border Grid.Row="0" Grid.Column="0" TextBlock.Foreground="{StaticResource TextColorBrush}">
            <TextBlock Text="リソースのテスト1" />
        </Border>

        <Border Grid.Row="1" Grid.Column="1" TextBlock.Foreground="{StaticResource TextColorBrush}">
            <TextBlock Text="リソースのテスト2" />
        </Border>
    </Grid>
</Window>

<Window x:Class="MergedDictionary.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>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Border>

</Border>

</Grid>

</Window>

実行結果．

Border の上にマウスカーソルを乗せると背景色が変化します．
Border.xaml で定義した動作が反映されています．

以上小ネタでした．

ItemsControl でデータ点を並べる

Posted on 2014/04/01 by twyujiro15

WPF でグラフ表示をしたいと常々思ってはいるんだけど，
VC++ のように自分で描画させるコードをしこしこ書くのはなんか違うと思い，
web 上で探しまくった結果，
結局のところ ItemsControl を使うんじゃないかと思い始めた今日この頃．

そんなわけで ItemsControl でデータ点を並べる XAML を書いてみた．

<Window x:Class="ItemsControlGraph.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>
        <ItemsControl>
            <ItemsControl.ItemsSource>
                <x:Array Type="Point">
                    <Point X="0" Y="0" />
                    <Point X="20" Y="10" />
                    <Point X="40" Y="20" />
                    <Point X="60" Y="30" />
                    <Point X="80" Y="40" />
                    <Point X="100" Y="50" />
                    <Point X="120" Y="60" />
                    <Point X="140" Y="70" />
                    <Point X="160" Y="80" />
                    <Point X="180" Y="90" />
                    <Point X="200" Y="100" />
                    <Point X="220" Y="90" />
                    <Point X="240" Y="80" />
                    <Point X="260" Y="70" />
                    <Point X="280" Y="60" />
                    <Point X="300" Y="50" />
                    <Point X="320" Y="40" />
                    <Point X="340" Y="30" />
                    <Point X="360" Y="20" />
                    <Point X="380" Y="10" />
                    <Point X="400" Y="0" />
                </x:Array>
            </ItemsControl.ItemsSource>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Path Fill="Red">
                        <Path.Data>
                            <EllipseGeometry Center="{Binding}"
                                             RadiusX="4" RadiusY="4" />
                        </Path.Data>
                    </Path>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

<Window x:Class="ItemsControlGraph.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>

<ItemsControl.ItemsSource>

<x:Array Type="Point">

</x:Array>

</ItemsControl.ItemsSource>

<ItemsControl.ItemsPanel>

</ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

<ItemsControl.ItemTemplate>

<Path.Data>

<EllipseGeometry Center="{Binding}"

RadiusX="4" RadiusY="4" />

</Path.Data>

</Path>

</DataTemplate>

</ItemsControl.ItemTemplate>

</ItemsControl>

</Grid>

</Window>

ItemsPanelTemplate でアイテムを並べるパネルに Grid を指定．
各アイテムは System.Point 構造体で，
これがそのまま描画する座標になっている．

ItemsPanelTemplate で Grid を指定できることは知っていたけど，
まさかこんな使い方をするなんて全然思いつきませんでした．
ItemsControl と DataTemplate の底力を垣間見た瞬間だった．
だいぶ頭固くなってきたな～．

というわけで実行すると次のように点が並びます．

ItemsControl でグラフを表示するための入り口がなんとなく見えた気がするコードでした．

INotifyPropertyChanged を実装した抽象クラス

Posted on 2014/03/31 by twyujiro15

試しに INotifyPropertyChanged インターフェースと IDisposable インターフェースを実装した抽象クラスを書いてみる。

namespace Skelton
{
    using System;
    using System.ComponentModel;

    /// <summary>
    /// プロパティ変更通知を持つデータの抽象クラス
    /// </summary>
    public abstract class PropertyChangedDataClassBase : INotifyPropertyChanged, IDisposable
    {
        #region INotifyPropertyChanged の実装
        /// <summary>変更イベントハンドラ
        /// プロパティ値
        /// </summary>
        private PropertyChangedEventHandler propertyChangedHandler;

        /// <summary>
        /// プロパティ値変更イベント
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged
        {
            add { propertyChangedHandler += value; }
            remove { propertyChangedHandler -= value; }
        }

        /// <summary>
        /// プロパティ値変更通知
        /// </summary>
        /// <param name="propertyName"></param>
        protected virtual void RaisePropertyChanged(string propertyName)
        {
            var h = propertyChangedHandler;
            if (h != null)
                h(this, new PropertyChangedEventArgs(propertyName));
        }

        /// <summary>
        /// プロパティ値変更ヘルパー
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="target">変更するターゲット変数</param>
        /// <param name="value">変更後の値</param>
        /// <param name="propertyName">プロパティ名</param>
        /// <returns>false:変更なし/true:変更あり</returns>
        public virtual bool SetProperty<T>(ref T target, T value, string propertyName)
        {
            if (target == null)
            {
                if (value == null)
                    return false;
            }
            else
            {
                if (target.Equals(value))
                    return false;
            }

            target = value;
            RaisePropertyChanged(propertyName);
            return true;
        }
        #endregion

        #region IDisposable の実装
        /// <summary>
        /// リソース解放済みか確認する
        /// </summary>
        public bool IsDisposed { get; private set; }

        /// <summary>
        /// リソースの解放
        /// </summary>
        public void Dispose()
        {
            try
            {
                OnDispose(true);
            }
            catch
            {
            }
        }

        /// <summary>
        /// リソースの解放処理
        /// </summary>
        /// <param name="disposeAll"></param>
        protected virtual void OnDispose(bool disposeAll)
        {
            if (IsDisposed)
                return;
            IsDisposed = true;

            if (disposeAll)
            {
                // マネージドなリソースの解放
                foreach (PropertyChangedEventHandler h in propertyChangedHandler.GetInvocationList())
                {
                    PropertyChanged -= h;
                }

            }

            // アンマネージドなリソースの解放 (override で記述)
        }
        #endregion
    }
}

100

101

102

103

104

105

106

107

108

namespace Skelton

{

using System;

using System.ComponentModel;

/// <summary>

/// プロパティ変更通知を持つデータの抽象クラス

/// </summary>

public abstract class PropertyChangedDataClassBase : INotifyPropertyChanged, IDisposable

{

#region INotifyPropertyChanged の実装

/// <summary>変更イベントハンドラ

/// プロパティ値

/// </summary>

private PropertyChangedEventHandler propertyChangedHandler;

/// <summary>

/// プロパティ値変更イベント

/// </summary>

public event PropertyChangedEventHandler PropertyChanged

{

add { propertyChangedHandler += value; }

remove { propertyChangedHandler -= value; }

}

/// <summary>

/// プロパティ値変更通知

/// </summary>

/// <param name="propertyName"></param>

protected virtual void RaisePropertyChanged(string propertyName)

{

var h = propertyChangedHandler;

if (h != null)

h(this, new PropertyChangedEventArgs(propertyName));

}

/// <summary>

/// プロパティ値変更ヘルパー

/// </summary>

/// <typeparam name="T"></typeparam>

/// <param name="target">変更するターゲット変数</param>

/// <param name="value">変更後の値</param>

/// <param name="propertyName">プロパティ名</param>

/// <returns>false:変更なし/true:変更あり</returns>

public virtual bool SetProperty<T>(ref T target, T value, string propertyName)

{

if (target == null)

{

if (value == null)

return false;

}

else

{

if (target.Equals(value))

return false;

}

target = value;

RaisePropertyChanged(propertyName);

return true;

}

#endregion

#region IDisposable の実装

/// <summary>

/// リソース解放済みか確認する

/// </summary>

public bool IsDisposed { get; private set; }

/// <summary>

/// リソースの解放

/// </summary>

public void Dispose()

{

try

{

OnDispose(true);

}

catch

{

}

/// <summary>

/// リソースの解放処理

/// </summary>

/// <param name="disposeAll"></param>

protected virtual void OnDispose(bool disposeAll)

{

if (IsDisposed)

return;

IsDisposed = true;

if (disposeAll)

{

// マネージドなリソースの解放

foreach (PropertyChangedEventHandler h in propertyChangedHandler.GetInvocationList())

{

PropertyChanged -= h;

}

// アンマネージドなリソースの解放 (override で記述)

}

#endregion

}

きれいに表示されているはず。

日々の開発日記など

Posted on 2014/03/31 by twyujiro15

書いてみようかと思い立ち、
WordPress までインストールしてブログを作ってみた。
開発は主に WPF + C# のデスクトップアプリケーション。
あんまり触ってる時間もないのでゆっくりまったりやっていきます。

2024年12月
月	火	水	木	金	土	日
« 10月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31