소개

화면에서 무언가를 입력하고 있을 때, 다른 화면에서 검색 화면을 내고 항목을 선택하는 경우가 있습니다.
예를 들어, 구입 화면이 있고, 상품을 선택하기 위해 리스트를 표시시키는 일이라고 할 수 있습니다.

(이것은 옛날 개발에 관련된 화면입니다)

하지만 좀 더 멋지게 화면을 만들고 싶다고 생각하고, 검색 버튼을 누르면, 화면의 옆에서 다른 화면이 슬라이드 해 주면 좋겠다고 생각했습니다.
뭔가 없을까하고 찾고 있었는데, MaterialDesign에서 서랍 기능이라는 것이있었습니다.
구체적으로는 MaterialDesigh의 DrawerHost라는 기능입니다.

MaterialDesignDemo

MaterialDesignDemo.exe에서 보면 이런 일이있었습니다.

화살표를 누르면 상하좌우에서 서랍이 나온다는 기능입니다.
이 소스 코드를 복사하여 코드를 사용하는 양식에 맞게 수정했습니다.

예

이 [테라피스트 선택] 버튼을 누르면 오른쪽에서 Drawer가 나오게 합니다.

코드

그건 그렇고, .Value는 ReactiveProperty를 사용하기 때문입니다.

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

    <materialDesign:DrawerHost Grid.Row="1" Grid.RowSpan="5" 
                               Grid.Column="0" Grid.ColumnSpan="2"
                               IsRightDrawerOpen="{Binding IsRightDrawerOpen.Value}">
            <materialDesign:DrawerHost.Style>
                <Style TargetType="materialDesign:DrawerHost"
                       BasedOn="{StaticResource {x:Type materialDesign:DrawerHost}}">
                    <Setter Property="OverlayBackground" Value="AliceBlue"/>
                </Style>
            </materialDesign:DrawerHost.Style>
            <materialDesign:DrawerHost.RightDrawerContent>
                    <Grid Margin="16" Width="200">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="36"/>
                            <RowDefinition/>
                            <RowDefinition Height="36"/>
                        </Grid.RowDefinitions>
                    <ComboBox ItemsSource="{Binding TherapistKinds}"
                              SelectedItem="{Binding SelectedTherapistKinds.Value}"
                              Text="{Binding SelectedTherapistKidns.Value}"
                              materialDesign:TextFieldAssist.HasClearButton="True"/>
                    <ListBox Grid.Row="1"
                             ItemsSource="{Binding TherapistList}"
                             SelectedItem="{Binding SelectedTherapist.Value}">
                         <i:Interaction.Triggers>
                             <i:EventTrigger EventName="MouseDoubleClick">
                                <i:InvokeCommandAction Command="{Binding TherapistSelectCommand, Mode=OneWay}" />
                             </i:EventTrigger>
                         </i:Interaction.Triggers>
                    </ListBox>
                        <Button Grid.Row="2"
                                Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
                                CommandParameter="{x:Static Dock.Right}"
                                Margin="4"
                                HorizontalAlignment="Center"
                                Style="{DynamicResource MaterialDesignFlatButton}"
                                Content="Cancel"/>
                </Grid>
            </materialDesign:DrawerHost.RightDrawerContent>
                <Button Content="セラピスト選択"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Bottom"
                        Width="120"
                        Style="{StaticResource MaterialDesignOutlinedButton}"
                        Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                        CommandParameter="{x:Static Dock.Right}"
                        materialDesign:ButtonAssist.CornerRadius="10"
                        BorderBrush="MediumSlateBlue"/>
    </materialDesign:DrawerHost>

해설

xmlns:materialDesign="ht tp // 마테리아 l로 하고 g 마늘 ml. 네 t / 흠 fx / ㎁ ml / 테메 s "에서 MaterialDesign을 사용할 수 있도록 참조 설정

< materialDesign : DrawerHost/> 내에서 스타일로 표시 할 때 배경색을 지정합니다.
오른쪽에서 나오도록(듯이) 하기 위해서, < materialDesign:DrawerHost.RightDrawerContent >를 기술해, 그 안에 ComboBox나 ListBox등 필요한 컨트롤을 배치하고 있습니다.

이 내용을 보려면 < materialDesign:DrawerHost/> 안에 버튼을 놓고 Command로 "{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"와 CommandParameter로 "{x:Static Dock.Right}"를 지정합니다.
이 CommandParameter로 상하 좌우를 판별하고 있는 것 같습니다.

이것만으로 서랍 기능 (Drawer)을 사용할 수 있습니다. 매우 쉽고 놀랐습니다.
디자인 화면을 보면 Drawer가 화면 밖으로 디자인되어 있음을 알 수 있습니다.


목록에서 값이 선택되었을 때 Drawer를 반환할 때 IsRightDrawerOpen 속성을 ViewModel에서 False로 설정하면 됩니다.