C#,WPF,ソフトウェア開発

  • TreeView の ItemsSource に全体の配列をBindし、 HierarchicalDataTemplate の ItemsSource に、子要素をBindする
  • 各項目のスタイルは、TreeView.ItemContainerStyle に設定する
  • 子要素が1つでもあれば、展開(>)ボタンが表示される

MainWindow.xaml

<Window x:Class="WpfApp7.MainWindow"
        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"
        xmlns:local="clr-namespace:WpfApp7"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    
    <Grid>

        <TreeView ItemsSource="{Binding Mode=OneWay}">
            <TreeView.Style>
                <!-- TreeView自体のスタイル -->
                <Style TargetType="{x:Type TreeView}" BasedOn="{StaticResource MaterialDesignTreeView}">
                    <Setter Property="Background" Value="#FFF0F0F0"/>
                </Style>
            </TreeView.Style>

            <TreeView.ItemContainerStyle>
                <!-- TreeViewの各項目のスタイル -->
                <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource MaterialDesignTreeViewItem}">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Background" Value="{Binding Path=BackColor, Mode=OneTime}"/>
                </Style>
            </TreeView.ItemContainerStyle>

            <TreeView.ItemTemplate>
                <!-- HierarchicalDataTemplate の ItemSource に、子階層をBind -->
                <HierarchicalDataTemplate DataType="local:TreeDataStructure" ItemsSource="{Binding Path=SubData, Mode=OneWay}">
                    <Label Content="{Binding Path=LabelTest, Mode=OneWay}" Foreground="{Binding Path=ForeColor, Mode=OneTime}"/>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
        
    </Grid>
    
</Window>

C#,WPF,ソフトウェア開発

TreeViewの表示件数が多くなると、ノードのExpand時、表示に時間がかかるようになる。
VirtualizingStackPanel.IsVirtualizing 及び VirtualizingStackPanel.VirtualizationMode を
設定することで、パフォーマンスは改善する。
(代償として、展開時のなめらかさは落ちる。)

<TreeView>
    <TreeView.Style>
        <Style TargetType="{x:Type TreeView}" BasedOn="{StaticResource MaterialDesignTreeView}">
            <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"/>
            <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling"/>
        </Style>
    </TreeView.Style>
    <TreeViewItem>
        <TreeViewItem.Header>
            <TextBlock Text="Root"/>
        </TreeViewItem.Header>
        <TextBlock Text="1-1"/>
        <TextBlock Text="1-2"/>
        <TreeViewItem>
            <TreeViewItem.Header>
                <TextBlock Text="1-3"/>
            </TreeViewItem.Header>
            <TextBlock Text="1-3-1"/>
            <TextBlock Text="1-3-2"/>
            <TreeViewItem>
                <TreeViewItem.Header>
                    <TextBlock Text="1-3-3"/>
                </TreeViewItem.Header>
                <TextBlock Text="1-3-3-1"/>
                <TextBlock Text="1-3-3-2"/>
            </TreeViewItem>
        </TreeViewItem>
        <TreeViewItem>
            <TreeViewItem.Header>
                <TextBlock Text="1-4"/>
            </TreeViewItem.Header>
            <TextBlock Text="1-4-1"/>
            <TextBlock Text="1-4-2"/>
        </TreeViewItem>
    </TreeViewItem>
</TreeView>

C#,WPF,メモ,開発環境

よく使う初期環境 のMaterialDesignThemes 3.1.3 対応版

  • ControlzEx 4.3.2
  • LivetCask 3.2.3.1
  • LivetCask.Behaviors 3.2.3.1
  • LivetCask.Collections 3.2.3.1
  • LivetCask.Converters 3.2.3.1
  • LivetCask.Core 3.2.3.1
  • LivetCask.EventListeners 3.2.3.1
  • LivetCask.Messaging 3.2.3.1
  • LivetCask.Mvvm 3.2.3.1
  • MahApps.Metro 2.2.0
  • MaterialDesignColors 1.2.6
  • MaterialDesignThemes 3.1.3
  • MaterialDesignThemes.MahApps 0.1.4
  • Microsoft.Xaml.Behaviors.Wpf 1.1.19

C#,WPF

画像の登録

1. プロジェクトのプロパティ → リソース → イメージ に、表示したい画像を登録する。

C#,WPF

MainView.xaml

<Window x:Class="WpfApp15.View.MainView"
        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"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:local="clr-namespace:WpfApp15.View"
        xmlns:vm="clr-namespace:WpfApp15.ViewModel"
        mc:Ignorable="d"
        Title="MainView" Height="450" Width="800">

    <Window.DataContext>
        <vm:MainViewModel/>
    </Window.DataContext>

    <i:Interaction.Triggers>
        <i:EventTrigger EventName ="Loaded">
            <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="OnLoaded" />
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <Grid>
        <Button>
            <Button.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="MenuParent" ItemsSource="{Binding ArrayMenu1}">
                        <MenuItem.ItemContainerStyle>
                            <Style TargetType="MenuItem">
                                <Setter Property="Header" Value="{Binding DisplayName}"/>
                                <Setter Property="IsChecked" Value="{Binding Checked}"/>
                                <Setter Property="Command" Value="{Binding}"/>
                            </Style>
                        </MenuItem.ItemContainerStyle>
                    </MenuItem>
                </ContextMenu>
            </Button.ContextMenu>
        </Button>
    </Grid>
</Window>

WPF,デザイン,開発環境

Fluent Designとは

Microsoftが2017年に提唱したデザインシステム。

Windows10の電卓など、一部アプリケーションはすでにFluent Designになっている。
また、Office・カレンダー・メール等、Microsoft製アプリケーションのアイコンデザインがFluent Designベースに変更された。

C#,WPF

MainView.xaml

<Window x:Class="WpfApp27.View.MainView"
        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"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:local="clr-namespace:WpfApp27.View"
        xmlns:vm="clr-namespace:WpfApp27.ViewModel"
        mc:Ignorable="d"
        Title="MainView" Height="250" Width="400">

    <Window.DataContext>
        <vm:MainViewModel/>
    </Window.DataContext>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Column="0">
            <Button Content="Page1へ">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="ScrollToObject" MethodParameter="{Binding ElementName=page1}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
            <Button Content="Page2へ">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="ScrollToObject" MethodParameter="{Binding ElementName=page2}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
            <Button Content="Page3へ">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="ScrollToObject" MethodParameter="{Binding ElementName=page3}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
        </StackPanel>

        <ScrollViewer Grid.Column="1">
            <StackPanel>
                <StackPanel.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="Margin" Value="0,0,0,300"/>
                    </Style>
                </StackPanel.Resources>
                
                <TextBlock x:Name="page1" Text="Page1"/>
                <TextBlock x:Name="page2" Text="Page2"/>
                <TextBlock x:Name="page3" Text="Page3"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
    
</Window>