Bagaimana cara mengikat properti Metro Flyout ItemContainerStyle dari tombol di RightWindowCommands?

Saya sedang mengerjakan solusi untuk pertanyaan ini sebagai dasar upaya saya saat ini untuk mengelola pembukaan dan penutupan flyout Metro. Perbedaannya adalah saya memiliki ToggleButton yang ditentukan di RightWindowCommands. Perilaku yang diinginkan adalah IsCheckedstatus tombol ini harus terikat ke properti IsOpen dari model tampilan flyout yang mendasarinya.

Ini adalah XAML dengan beberapa upaya saya yang gagal:

<controls:MetroWindow.Flyouts>
    <controls:FlyoutsControl x:Name="FlyoutsControl" >
        <controls:FlyoutsControl.ItemContainerStyle>
            <Style BasedOn="{StaticResource {x:Type controls:Flyout}}" TargetType="{x:Type controls:Flyout}">
                <Setter Property="Header" Value="{Binding Header}" />
                <Setter Property="IsOpen"  Value="{Binding IsOpen}" />
                <Setter Property="Position" Value="{Binding Position}" />
                <Setter Property="Theme" Value="Accent" />
            </Style>
        </controls:FlyoutsControl.ItemContainerStyle>
        <controls:FlyoutsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type local:SettingsFlyoutViewModel}">
                <local:SettingsFlyoutView x:Name="SettingsFlyoutView"/>
            </DataTemplate>
        </controls:FlyoutsControl.ItemTemplate>
    </controls:FlyoutsControl>
</controls:MetroWindow.Flyouts>
<controls:MetroWindow.RightWindowCommands>
    <controls:WindowCommands>
<!--<ToggleButton Content="{iconPacks:FontAwesome Kind=FighterJetSolid}" Background="{DynamicResource AccentColorBrush}" ToolTip="Toggle flyout." BorderBrush="White" BorderThickness="1" IsChecked="{Binding ElementName=SettingsFlyoutView, Path=IsOpen}" Cursor="Hand"/>-->
        <!--<ToggleButton Content="{iconPacks:FontAwesome Kind=FighterJetSolid}" Background="{DynamicResource AccentColorBrush}" ToolTip="Toggle flyout." BorderBrush="White" BorderThickness="1" 
                      IsChecked="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type controls:MetroWindow}}, Path=IsOpen}"/>-->
        <!--<ToggleButton Content="{iconPacks:FontAwesome Kind=FighterJetSolid}" Background="{DynamicResource AccentColorBrush}" ToolTip="Toggle flyout." BorderBrush="White" BorderThickness="1" 
                      IsChecked="{Binding ElementName=FlyoutsControl, Path=DataContext.IsOpen}"/>-->
        <!--<ToggleButton Content="{iconPacks:FontAwesome Kind=FighterJetSolid}" Background="{DynamicResource AccentColorBrush}" ToolTip="Toggle flyout." BorderBrush="White" BorderThickness="1" 
                      IsChecked="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type controls:Flyout}}, Path=IsOpen}"/>-->
    </controls:WindowCommands>
</controls:MetroWindow.RightWindowCommands>

What is the right binding strategy to bind IsChecked to IsOpen?


mvvm wpf xaml flyout mahapps.metro
person ket    schedule 21.11.2018    source sumber
comment
Bagaimana Anda mengidentifikasi Flyout yang mendasari untuk tombol tertentu?   -  person mm8    schedule 22.11.2018
comment
@ mm8 Poin bagus - Saya mengedit pertanyaan saya untuk memasukkan ItemTemplate yang sebelumnya dihilangkan. Di sini SettingsFlyoutView adalah kontrol pengguna yang memanfaatkan SettingsFlyoutViewModel sebagai model tampilan pendukung. Saya masih kesulitan melakukan penjilidan; lihat upaya terbaru di atas bagian komentar. Apa yang saya lewatkan?   -  person ket    schedule 26.11.2018

Jawaban (1)


arrow_upward
0
arrow_downward

Ini dia

<Controls:MetroWindow.Flyouts>
    <Controls:FlyoutsControl>
        <Controls:FlyoutsControl.ItemContainerStyle>
            <Style BasedOn="{StaticResource {x:Type Controls:Flyout}}" TargetType="{x:Type Controls:Flyout}">
                <Setter Property="Header" Value="{Binding Header}" />
                <Setter Property="IsOpen"  Value="{Binding IsOpen}" />
                <Setter Property="Position" Value="{Binding Position}" />
                <Setter Property="Theme" Value="Accent" />
            </Style>
        </Controls:FlyoutsControl.ItemContainerStyle>
        <Controls:Flyout x:Name="yourMahAppFlyout" Header="Flyout" Position="Right" Width="200">
            <!-- Your custom content here -->
        </Controls:Flyout>
    </Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>
<Controls:MetroWindow.RightWindowCommands>
    <Controls:WindowCommands>
        <ToggleButton Content="{iconPacks:FontAwesome Kind=FighterJetSolid}" Background="{DynamicResource AccentColorBrush}" ToolTip="Toggle flyout." BorderBrush="White" BorderThickness="1" 
                  IsChecked="{Binding ElementName=yourMahAppFlyout, Path=IsOpen}" Cursor="Hand"/>
    </Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>
person Cinchoo    schedule 22.11.2018
comment
Saat saya menambahkan item baris <Controls:Flyout>, saya mendapatkan pengecualian runtime Items collection must be empty before using ItemsSource. Salah satu perbedaan antara skenario saya dan cuplikan situs web Mahapps adalah contohnya tidak menggunakan ItemContainerStyle, yang menurut saya diperlukan untuk mengikat properti model tampilan saya berdasarkan tautan di atas. Adakah pemikiran bagaimana mengatasi pengecualian? - person ket; 26.11.2018
comment
Saya tidak dapat mereproduksi masalah Anda. Bisakah Anda memposting contoh kode Anda untuk melihatnya? - person Cinchoo; 26.11.2018
comment
Saya telah menempatkan salinan proyek karena menimbulkan pengecualian di sini: 1drv.ms/f/s!AsvM6Pyke4A6hCRyovosrs0kIKGG, Konten di atas dapat ditemukan di MainWindow.xaml. - person ket; 27.11.2018