WindowsPhoneで使えるCharmみたいなコントロール公開しました

WindowsPhoneで使えるCharmみたいなコントロールを公開しました。Aristea Phoneの横から出てくるあのあれです。こんなふうになります。

使い方ですが、参照を追加してXAMLをこんな感じで書きます。

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:phoneCharmControl="using:PhoneCharmControl"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RenderTransform>
            <CompositeTransform />
        </Grid.RenderTransform>
        
        <phoneCharmControl:Charm CharmWidth="64" Background="Aqua">
            <Button />
        </phoneCharmControl:Charm>
    </Grid>
</Page>

これで左から出てくるメニューができました。簡単でしょ？

右から出てくるにはCharmコントロールのEdgePlacementプロパティをセットします。

<phoneCharmControl:Charm CharmWidth="64" Background="Aqua" EdgePlacement="Right">
    <Button />
</phoneCharmControl:Charm>

また、親コントロールもしくはParentContentElementで明示的に指定したコントロールにCompositeTransformが設定されている場合、奥に引っ込んでいくアニメーションが設定されます。

<Grid>
    <Grid.RenderTransform>
        <CompositeTransform />
    </Grid.RenderTransform>
    <phoneCharmControl:Charm CharmWidth="64" Background="Aqua">
        <Button />
    </phoneCharmControl:Charm>
</Grid>

推奨のXAMLはこんな感じです。

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:phoneCharmControl="using:PhoneCharmControl"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid x:Name="ContentRoot">
            <Grid.RenderTransform>
                <CompositeTransform />
            </Grid.RenderTransform>
            <!-- コンテンツをここに -->
        </Grid>

        <phoneCharmControl:Charm CharmWidth="64" Background="Aqua" ParentContentControl="{Binding ElementName=ContentRoot}">
            <Button />
        </phoneCharmControl:Charm>
    </Grid>
</Page>

そのほかカスタムに使えそうなプロパティの一覧です。

name	type	descr.
EdgePlacement	HorizontalAlignment	左右どっちから引っ張るかを設定します
CharmWidth	double	引っ張り出したチャームの幅を指定します
ParentContentElement	UIElement	透明度や奥に引っ込むアニメーションをさせる対象を明示的に指定します
Background	Brush	チャームの背景を指定します

現時点でnugetになってないのでソースからみてください