##目的
横幅を変更できるナビゲーションパネルを待つWPFを作る

##方針
段階に分けて解説します。
１．画面分割をしナビゲーションの下地とトグルボタンを配置する。
２．ナビゲーションパネルにいくつかのUI要素を追加
３．ナビゲーションパネルの横幅を変えるアニメーションを追加

##1　画面分割をしナビゲーションの下地とトグルボタンを配置する
・後でアニメーションを追加したり整形しやすいように画面をいくつかのGridに分割する。
・トグルボタンをチェックすればナビゲーションパネル以外の画面の透明度を変更するようにする。

###UI：初期状態

###UI：トグルをクリック後"TEST"表記を透明にする

###XMAL

<Window x:Class="NavigationPanel01.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:NavigationPanel01"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid x:Name="main" Margin="65,0,0,0">
            <TextBox HorizontalAlignment="Left" Height="23" Margin="85,100,0,0" TextWrapping="Wrap" Text="TEST" VerticalAlignment="Top" Width="120"/>
        </Grid>
        <Grid x:Name="nav_pnl"
              HorizontalAlignment="Left"
              Width="65"
              Background="#FFE33838">         
            <StackPanel x:Name="st_pn1">
                <ToggleButton x:Name="Tg_Btn"
                          VerticalAlignment="Center"
                          HorizontalAlignment="Left"
                          Margin="18,10,0,0"
                          Height="30"
                          Width="30"
                          BorderThickness="0"
                          Unchecked="Tg_Btn_Unchecked" Checked="Tg_Btn_Checked">
                    <ToggleButton.Background>
                        <ImageBrush ImageSource="Icon\Drawer\toggle.png"
                                Stretch="Fill"/>
                    </ToggleButton.Background>
                </ToggleButton>
            </StackPanel>  
        </Grid>    
    </Grid>
</Window>

###ロジック

namespace NavigationPanel01
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Tg_Btn_Checked(object sender, RoutedEventArgs e) => main.Opacity = 0.3;

        private void Tg_Btn_Unchecked(object sender, RoutedEventArgs e) => main.Opacity = 1;
    }
}

###解説
UI左上にある四角いトグルボタンをチェックすると、"TEXT"表示のあるテキストボックスを含めたナビゲーションパネル以外の画面を透明にします。

XMAL上で以下のことを行います。
・UiをGrid(x:Name="main")とNavigationPanel(Grid x:Name="nav_pn1")に分割。
・nav_pn1の上にスタックパネルを配置。
・スタックパネルの上にトグルボタン<ToggleButton x:Name="Tg_Btn"を配置。
・トグルボタン内にアクションとしてチェック機能UncheckedとCheckedを設定。
・で画像設定。

ロジックコードで以下のことを行います。
・トグルボタン内のチェック機能の中身を実装する。
中身はGrid(main)の透明度Opacityを設定する。

##2　ナビゲーションパネルにいくつかのUI要素を追加
・ナビゲーションパネルを縦方向にトグルエリアと"Apple, Orange, Bananaアイコン"に分割する
・Apple, Orange, Bananaアイコンとテキストを追加する

###UI　
テキストは配置しているが、初期状態では見えない

VisualStudio上でナビゲーションパネルを横に広げればテキストが隠れていると分かる

###XMAL

     <Grid>
        <Grid x:Name="main" Margin="65,0,0,0">
            <TextBox HorizontalAlignment="Left" Height="23" Margin="240,100,0,0" TextWrapping="Wrap" Text="TEST" VerticalAlignment="Top" Width="120"/>
        </Grid>


        <Grid x:Name="nav_pnl"
              HorizontalAlignment="Left"
              Width="65"
              Background="#FFE33838">

            <StackPanel x:Name="st_pn1">

                <!--トグルを置くGridエリア-->
                <Grid Height="90">
                    <ToggleButton x:Name="Tg_Btn"
                          VerticalAlignment="Center"
                          HorizontalAlignment="Left"
                          Margin="18,-20,0,0"
                          Height="30"
                          Width="30"
                          BorderThickness="0"
                          Unchecked="Tg_Btn_Unchecked" Checked="Tg_Btn_Checked">
                        <ToggleButton.Background>
                            <ImageBrush ImageSource="Icon\Drawer\toggle.png"
                                Stretch="Fill"/>
                        </ToggleButton.Background>
                    </ToggleButton>
                </Grid>

                <!--他のアイコンを置くListViewエリア-->
                <ListView x:Name="LV"
                          Background="Transparent"
                          BorderBrush="Transparent"
                          ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                   
                    <!--Apple-->
                    <ListViewItem HorizontalAlignment="Left" Margin="0,0,0,15">
                        <StackPanel Orientation="Horizontal" Height="50" Width="180">
                            <Image Source="Icon\Drawer\Apple.png" Width="50" Height="50"
                               Stretch="Fill" Margin="0,0,0,-0.4"/>
                            <TextBlock Text="Apple" Margin="25,0,0,0"/>
                        </StackPanel>
                    </ListViewItem>
                    
                    <!--Orange-->
                    <ListViewItem HorizontalAlignment="Left" Margin="0,0,0,15">
                        <StackPanel Orientation="Horizontal" Height="50" Width="180">
                            <Image Source="Icon\Drawer\Orange.png"
                               Stretch="Fill"/>
                            <TextBlock Text="Orange" Margin="25,0,0,0"/>
                        </StackPanel>
                    </ListViewItem>
                    
                    <!--Banana-->
                    <ListViewItem HorizontalAlignment="Left" Margin="0,0,0,15">
                        <StackPanel Orientation="Horizontal" Height="50" Width="180">
                            <Image Source="Icon\Drawer\Banana.png"
                               Stretch="Fill"/>
                            <TextBlock Text="Banana" Margin="25,0,0,0"/>
                        </StackPanel>
                    </ListViewItem>

                </ListView>

            </StackPanel>

        </Grid>


    </Grid>

###解説
・トグルを置くためのGridを作る(名前はここではつけなかった)
・Appleやオレンジアイコンを置くためのListViewエリア(x:Name="LV")を作成
・ListViewエリアに３つのListViewItemを作成
・各ListViewItemにStackpanelを作りOrientaionをHorizontalにし、アイコンの写真とテキストボックスを横並べて配置する

##3 ナビゲーションパネルの横幅を変えるアニメーションを追加
・トグルボタンをクリックするとナビゲーションパネルの横幅を変えるアニメーション追加

###UI
トグルボタンをクリックすると、ナビゲーションボタンが広がる

###XMAL
トグルボタン内にイベントを追加

<ToggleButton x:Name="Tg_Btn"
                          VerticalAlignment="Center"
                          HorizontalAlignment="Left"
                          Margin="18,-20,0,0"
                          Height="30"
                          Width="30"
                          BorderThickness="0"
                          Unchecked="Tg_Btn_Unchecked" Checked="Tg_Btn_Checked">
                        <ToggleButton.Background>
                            <ImageBrush ImageSource="Icon\Drawer\toggle.png"
                                Stretch="Fill"/>
                        </ToggleButton.Background>
                        
                        <!--Toggle Button Checked, Unchecked events-->
                        <ToggleButton.Triggers>
                           <!--トグルボタンをアンチェックしたときに起こるイベント-->
                            <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                                <BeginStoryboard>
                                    <Storyboard x:Name="HideStackPanel">
                                        <DoubleAnimation
                                            Storyboard.TargetName="nav_pnl"
                                            Storyboard.TargetProperty="Width"
                                            BeginTime="0:0:0"
                                            From="230" To="65"
                                            Duration="0:0:0.2">

                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <!--トグルボタンをチェックしたときに起こるイベント-->
                            <EventTrigger RoutedEvent="ToggleButton.Checked">
                                <BeginStoryboard>
                                    <Storyboard x:Name="ShowStackPanel">
                                        <DoubleAnimation
                                            Storyboard.TargetName="nav_pnl"
                                            Storyboard.TargetProperty="Width"
                                            BeginTime="0:0:0"
                                            From="65" To="230"
                                            Duration="0:0:0.3">
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            
                        </ToggleButton.Triggers>
                    </ToggleButton>

###解説
・EventTrigger:イベントへの応答で一連のアクションを適用するトリガーを表します。このイベントトリガーがかかったら次に書かれたストーリーボードを開始する
・BeginStoryboard：ストーリーボードを開始する
・Storyboard：アニメーション作成に使用
nav_pnlと定義されたオブジェクトのWidthを変更するアニメーション

##まとめ
3つの段階をへてNavigationPanelについて解説した
１．画面分割をしナビゲーションの下地とトグルボタンを配置する。
２．ナビゲーションパネルにいくつかのUI要素を追加
３．ナビゲーションパネルの横幅を変えるアニメーションを追加