UWP Community Toolkit 1.4.1を使ってみた

UWP Community ToolkitのV1.4.1がリリースされてました。
https://github.com/Microsoft/UWPCommunityToolkit/releases/tag/1.4.0
https://github.com/Microsoft/UWPCommunityToolkit/releases/tag/1.4.1

ということで今回も、個人的にいいなと思った点をまとめておきます。

新規コントロール

Carousel

一昔前によく見かけた感じの、カルーセル表示をするコントロールが追加されてました。

ItemsControl派生のコントロールとなっているので、ItemsSourceプロパティに表示したい要素を設定すれば、
こんな風に表示することができます。

MainPage.xaml

<controls:Carousel ItemDepth="200"ItemsSource="{x:Bind ImageList}"ItemRotationY="45"ItemMargin="-30"><controls:Carousel.ItemTemplate><DataTemplate><Image Width="200"Height="200"Source="{Binding}"Stretch="Uniform" /></DataTemplate></controls:Carousel.ItemTemplate></controls:Carousel>

MainPage.xaml.cs

publicsealedpartialclass MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.ImageList = new List<string>()
            {
                "Images/1.JPG",
                "Images/2.JPG",
                "Images/3.JPG",
                "Images/4.JPG",
                "Images/5.JPG",
                "Images/6.JPG",
            };
        }

        public IList<string> ImageList { get; set; }
    }

プロパティなど

注意事項

↓を見たところ、ItemDepthプロパティを明示的にセットしておかないと、例外を吐いてアプリが落ちてしまいます。
https://github.com/Microsoft/UWPCommunityToolkit/issues/1090

そのうち修正されるとは思いますが、しばらくの間はこのプロパティには何らかの値を必ずセットして使うようにしましょう。

Developer Tools

デバッグ用途で役に立ちそうなコントロールが2つ追加されています。

• FocusTracker
• AlignmentGrid

これらのコントロールを使う場合は、NugetからMicrosoft.Toolkit.Uwp.DeveloperToolsをインストールしておきましょう。

FocusTracker

こちらは、現在フォーカスを持っている要素の情報を表示してくれるコントロールです。

こんな風に、フォーカスが当たっているコントロールの名前などの情報が表示されます。
使いどころがあまりわからないですが・・・

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition Width="300" /></Grid.ColumnDefinitions><developerTools:FocusTracker Grid.Column="1"IsActive="True" /><Button x:Name="button1"Margin="10,10,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Content="Button" /><TextBox Margin="10,47,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Text="TextBox"TextWrapping="Wrap" /><RadioButton Margin="10,78,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Content="RadioButton" /></Grid>

AlignmentGrid

こんな風に、一定間隔のグリッドが表示されます。
レイアウトが乱れていないかチェックするのに役立つかと思います。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><developerTools:AlignmentGrid HorizontalStep="20"LineBrush="Black"Opacity="0.2"VerticalStep="20" /><Button Margin="20,20,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Content="Button" /><TextBlock Margin="40,80,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Text="TextBlock"TextWrapping="Wrap" /></Grid>

既存コントロールの改善点

MarkdownTextBlock

マークダウンの各種構文への対応改善

V1.3では、テーブル構文が正しく表示されない、、、など色々とマークダウンの表示に問題がありましたが、色々と修正されています。

テーブル表示だけでなく、GitHubのマークダウンのように```で括ってコードブロックを定義できるようになったりしてます。

ただし、言語を指定してのシンタックスハイライトなどは対応してないみたい。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><TextBox x:Name="txtMarkdownSource"Margin="5"AcceptsReturn="True" /><ScrollViewer Grid.Column="1"Margin="5"BorderBrush="{ThemeResource AppBarBorderThemeBrush}"BorderThickness="2"HorizontalScrollBarVisibility="Disabled"VerticalScrollBarVisibility="Auto"><controls:MarkdownTextBlock Margin="6"Foreground="Black"Text="{Binding Text, ElementName=txtMarkdownSource}" /></ScrollViewer></Grid>

MasterDetailView

MasterとDetailそれぞれに別々のCommandBarを付けられるようになりました。

MainPage.xaml

<Page.Resources><DataTemplate x:Key="ListTemplate"x:DataType="local:MenuItem"><StackPanel Margin="0,8"><TextBlock Style="{ThemeResource SubtitleTextBlockStyle}"Text="{x:Bind Title}" /><TextBlock Text="{x:Bind ImagePath}" /></StackPanel></DataTemplate><DataTemplate x:Key="DetailsTemplate"x:DataType="local:MenuItem"><Grid><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition /></Grid.RowDefinitions><RelativePanel Margin="5"><Ellipse x:Name="FromEllipse"Width="50"Height="50"Fill="Gray" /><TextBlock Margin="12,-6,0,0"RelativePanel.RightOf="FromEllipse"Style="{ThemeResource SubtitleTextBlockStyle}"Text="{x:Bind Title}" /><TextBlock RelativePanel.Below="FromEllipse"Text="{x:Bind ImagePath}" /></RelativePanel><Image Grid.Row="1"Margin="5"Source="{x:Bind ImagePath}"Stretch="Uniform" /></Grid></DataTemplate></Page.Resources><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><controls:MasterDetailsView ItemsSource="{x:Bind List}"ItemTemplate="{StaticResource ListTemplate}"DetailsTemplate="{StaticResource DetailsTemplate}"MasterHeader="ヘッダー"MasterPaneWidth="200"NoSelectionContent="要素が選択されていません"><controls:MasterDetailsView.MasterCommandBar><CommandBar ClosedDisplayMode="Minimal"><CommandBar.SecondaryCommands><AppBarButton Label="Secondary1"Icon="Edit"/><AppBarButton Label="Secondary2"Icon="Edit"/><AppBarToggleButton Label="Secondary3"Icon="Edit"/></CommandBar.SecondaryCommands><!--ここに定義したものはPrimaryCommandsプロパティになる--><AppBarButton Label="Primary1"Icon="Font"/><AppBarToggleButton Label="Primary2"Icon="Edit"/></CommandBar></controls:MasterDetailsView.MasterCommandBar></controls:MasterDetailsView></Grid>

MainPage.xaml.cs

publicsealedpartialclass MainPage : Page
    {
        public ObservableCollection<MenuItem> List { get; set; }

        public MainPage()
        {
            this.InitializeComponent();

            this.List = new ObservableCollection<MenuItem>()
            {
                new MenuItem("Sample1", "Images/1.JPG"),
                new MenuItem("Sample2", "Images/2.JPG"),
                new MenuItem("Sample3", "Images/3.JPG"),
                new MenuItem("Sample4", "Images/4.JPG"),
                new MenuItem("Sample5", "Images/5.JPG"),
                new MenuItem("Sample6", "Images/6.JPG"),
            };
        }
    }

    publicclass MenuItem
    {
        publicstring Title { get; set; }
        publicstring ImagePath { get; set; }

        public MenuItem(string title, string path)
        {
            this.Title = title;
            this.ImagePath = path;
        }
    }