テーマファイルの構造

テーマファイルの実体は、表示装置ウィンドウのGUI要素の構造と見た目を規定するスタイルやテンプレート、色を指定するブラシなどのリソースの集合であるリソースディクショナリです。ResourceDictionary要素をルートとし、その中にリソースを定義します。各リソースには x:Key属性が付けられており、この値をキーとして参照するリソースを指定します。また、Style要素やControlTemplate要素にはTargetType属性があり、スタイルやテンプレートを適用するコントロールの型を指定します。x:Key属性がないStyle要素によるスタイルは、TargetType属性で指定されたすべてのコントロールに適用されます。

NextStationでは、表示装置ウィンドウにNextStationViewコントロールが配置されており、このコントロールに対するスタイルを定義することで表示装置をデザインします。駅名や時刻などを表示する個別の部品についてもスタイルやテンプレートで定義し、適用するコントロールから参照します。

個々のGUI要素で表示するデータは、データバインディングによって参照します。特定の値や状態になった時に表示や動作を変える際には、トリガーを利用することができます。

以下に、NextStation v0.2.0.0 付属の埼京線E233-7000用テーマファイルの一部を掲載します。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
                    xmlns:ctrl="clr-namespace:WatakuCity.NextStation.Controls;assembly=NextStation"
                    xmlns:cvt="clr-namespace:WatakuCity.NextStation.Converter;assembly=NextStation">
    <x:Array x:Key="SolidLineColorBrushes" Type="SolidColorBrush">
        <!-- 埼京線 -->
        <SolidColorBrush Color="#FF009B8B" PresentationOptions:Freeze="True"/>

        <!-- りんかい線 -->
        <SolidColorBrush Color="#FF002E80" PresentationOptions:Freeze="True"/>
    </x:Array>

    ...

    <Style x:Key="MainArea" TargetType="Control">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Control">
                    <Border Name="MainAreaBase" BorderThickness="0,15,0,5">
                        <Border.Background>
                            ...
                        </Border.Background>
                        <Border.BorderBrush>
                            ...
                        </Border.BorderBrush>
                        <Grid>
                            <Control Style="{StaticResource TrainType}" Margin="8,1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            <Control Style="{StaticResource Destination}" Margin="220,6,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            <Control Name="StationName" Style="{StaticResource StationName}" Margin="8,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
                            <Control Style="{StaticResource CarNumber}" Margin="0,1,8,0" HorizontalAlignment="Right" VerticalAlignment="Top"/>
                            <Control Style="{StaticResource CurrentTime}" Margin="0,0,10,0" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding TrainInfo.TrainState}" Value="Stopping"/>
                                <Condition Binding="{Binding StationInfo.IsOrigin}" Value="True"/>
                            </MultiDataTrigger.Conditions>
                            <Setter TargetName="MainAreaBase" Property="Background" Value="#FF000000"/>
                            <Setter TargetName="MainAreaBase" Property="BorderThickness" Value="0,15,0,0"/>
                            <Setter TargetName="MainAreaBase" Property="Padding" Value="0,0,0,5"/>
                            <Setter TargetName="StationName" Property="Style" Value="{StaticResource StationNameAtOrigin}"/>
                        </MultiDataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="OptionalArea" TargetType="Control">
        ...
    </Style>

    <Style TargetType="ctrl:NextStationView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ctrl:NextStationView">
                    <StackPanel Width="960" Height="540" Background="#FFFFFFFF">
                        <Control Name="MainArea" Style="{StaticResource MainArea}" Height="170"/>
                        <Control Name="OptionalArea" Style="{StaticResource OptionalArea}" Height="370"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

テーマで使用できるプロパティ

NextStationでは、表示装置ウィンドウ用に以下のプロパティが公開されており、データバインディングによって参照することができます。これらのプロパティの下にはより細かいプロパティが存在し、階層構造になっています。例として、TrainInfoプロパティの下にはDirection、TrainState、TrainType、TrainName、ServiceInfo、Destinationといったプロパティがあります。

コントロール

NextStationでは、WPFの標準コントロールが使用できるほか、WatakuCity.NextStation.Controls 名前空間に定義された以下のコントロールを使用できます。テーマファイル内で使用する際は、ルート要素で名前空間を指定して参照できるようにしてください。上記サンプルコードでは ctrl:プレフィックスで参照しています。

コンバータ

バインディングするプロパティの値をテーマファイルで使用しやすい形式に変換するために、WatakuCity.NextStation.Converter 名前空間に定義された以下のコンバータを使用できます。テーマファイル内で使用する際は、ルート要素で名前空間を指定して参照できるようにしてください。上記サンプルコードでは cvt:プレフィックスで参照しています。