読者です 読者をやめる 読者になる 読者になる

SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

WPF向けにRelativePanelなどを実装したライブラリ~UniversalWPF~

WPF C#

↓のブログを読んでいて知りました。

こんなコントロールを作ってくれてる方がいたんですね!!
WPF用にRelativePanelやSplitViewを作ってくれてます。スバラシイ!!

準備

今のところNugetパッケージはないので、GitHubからクローンしてきてビルドして作ったdllをプロジェクトの参照に加えて使います。

↓を見ると、もうしばらくの間はNugetパッケージを作らずにこのままのスタイルで開発を予定のようです。 https://github.com/dotMorten/UniversalWPF/issues/3
それまでは、自分でビルドしてdllを参照して使いましょう。

使ってみる

てことで、ちょろっと使ってみます。

RelativePanel

<Window x:Class="WpfApplication1.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:local="clr-namespace:WpfApplication1"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MainWindow"
        Width="525"
        Height="350"
        mc:Ignorable="d">
    <RelativePanel>
        <Rectangle x:Name="origin"
                   Width="100"
                   Height="100"
                   Fill="Blue"
                   RelativePanel.AlignHorizontalCenterWithPanel="True"
                   RelativePanel.AlignVerticalCenterWithPanel="True"
                   Stroke="Black" />
        <Border Width="70"
                Height="70"
                Background="Cyan"
                RelativePanel.Below="origin"
                RelativePanel.RightOf="origin" />
    </RelativePanel>
</Window>

f:id:minami_SC:20151107134306p:plain:w350

SplitView

SplitViewはまだ開発段階とのことですが、使ってみるとこんな感じ。

<Window x:Class="WpfApplication1.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:local="clr-namespace:WpfApplication1"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MainWindow"
        Width="525"
        Height="350"
        mc:Ignorable="d">
    <Grid>
        <SplitView x:Name="splitView"
                   DisplayMode="Inline"
                   IsPaneOpen="{Binding IsChecked,
                                        ElementName=toggleSwitch,
                                        Mode=TwoWay}"
                   OpenPaneLength="150"
                   PaneBackground="LightGray"
                   PanePlacement="Left">
            <SplitView.Pane>
                <StackPanel>
                    <TextBlock Text="Item1" />
                    <TextBlock Text="Item2" />
                </StackPanel>
            </SplitView.Pane>
            <Grid Background="Beige">
                <ToggleButton x:Name="toggleSwitch"
                              Width="70"
                              Height="24"
                              Content="Show" />
            </Grid>
        </SplitView>
    </Grid>
</Window>

f:id:minami_SC:20151107134318p:plain:w350

CompactOverlayやCompactInlineなどのモードや、PanePlacement="Right"はまだ対応してないみたい。

まだ粗削りな段階ですが、今後がとても楽しみなライブラリです。