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

MainWindow.xaml

<Window x:Class="WpfApp8.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:WpfApp8"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
        <ListView ItemsSource="{Binding Path=ArrayData}">
            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListViewItem}">
                    
                    <!-- ボーダーの設定 -->
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ContentControl}">
                                <Border Background="{TemplateBinding Background}">
                                    <ContentPresenter />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    
                    <!-- 選択時の背景色 -->
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="Transparent" />
                        </Trigger>
                    </Style.Triggers>
                    
                </Style>
            </ListView.ItemContainerStyle>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </Grid>
</Window>

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

MainWindow.xaml

<Window x:Class="WpfApp8.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:WpfApp8"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal">
        
        <!-- 縦並び -->
        <ListView ItemsSource="{Binding Path=ArrayData}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <!-- 横並び -->
        <ListView ItemsSource="{Binding Path=ArrayData}">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </StackPanel>
</Window>

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ベースに変更された。