Mixing
How to bind to Metro Flyout ItemContainerStyle property from button in RightWindowCommands?
0
I'm working off the solution to this question as a basis for my current attempt to manage the opening and closing of a Metro flyout. The difference is that I have a ToggleButton defined in the RightWindowCommands. The desired behavior is that the IsCheckedstatus of this button should be bound to the IsOpen property of the underlying flyout viewmodel.
This is the XAML with some of my failed attempts:
<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?
wpf xaml mvvm mahapps.metro flyout
asked Nov 21 '18 at 19:01
ketket
266112
add a comment |
0
I'm working off the solution to this question as a basis for my current attempt to manage the opening and closing of a Metro flyout. The difference is that I have a ToggleButton defined in the RightWindowCommands. The desired behavior is that the IsCheckedstatus of this button should be bound to the IsOpen property of the underlying flyout viewmodel.
This is the XAML with some of my failed attempts:
<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?
wpf xaml mvvm mahapps.metro flyout
asked Nov 21 '18 at 19:01
ketket
266112
How do you identify the "underlying" Flyout for a specific button?
– mm8
Nov 22 '18 at 13:18
@mm8 Good point - I edited my question to include the previously omitted ItemTemplate. Here SettingsFlyoutView is a user control which leverages SettingsFlyoutViewModel as the backing viewmodel. I'm still having difficulty doing the binding tho; see the newest attempt at top of the commented section. What am I missing?
– ket
Nov 26 '18 at 19:22
add a comment |
0
0
0
I'm working off the solution to this question as a basis for my current attempt to manage the opening and closing of a Metro flyout. The difference is that I have a ToggleButton defined in the RightWindowCommands. The desired behavior is that the IsCheckedstatus of this button should be bound to the IsOpen property of the underlying flyout viewmodel.
This is the XAML with some of my failed attempts:
<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?
wpf xaml mvvm mahapps.metro flyout
asked Nov 21 '18 at 19:01
ketket
266112
I'm working off the solution to this question as a basis for my current attempt to manage the opening and closing of a Metro flyout. The difference is that I have a ToggleButton defined in the RightWindowCommands. The desired behavior is that the IsCheckedstatus of this button should be bound to the IsOpen property of the underlying flyout viewmodel.
This is the XAML with some of my failed attempts:
<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?
wpf xaml mvvm mahapps.metro flyout
wpf xaml mvvm mahapps.metro flyout
asked Nov 21 '18 at 19:01
ketket
266112
asked Nov 21 '18 at 19:01
ketket
266112
edited Nov 26 '18 at 19:20
ket
asked Nov 21 '18 at 19:01
ketket
266112
asked Nov 21 '18 at 19:01
ketket
266112
asked Nov 21 '18 at 19:01
ketket
266112
266112
How do you identify the "underlying" Flyout for a specific button?
– mm8
Nov 22 '18 at 13:18
@mm8 Good point - I edited my question to include the previously omitted ItemTemplate. Here SettingsFlyoutView is a user control which leverages SettingsFlyoutViewModel as the backing viewmodel. I'm still having difficulty doing the binding tho; see the newest attempt at top of the commented section. What am I missing?
– ket
Nov 26 '18 at 19:22
add a comment |
How do you identify the "underlying" Flyout for a specific button?
– mm8
Nov 22 '18 at 13:18
@mm8 Good point - I edited my question to include the previously omitted ItemTemplate. Here SettingsFlyoutView is a user control which leverages SettingsFlyoutViewModel as the backing viewmodel. I'm still having difficulty doing the binding tho; see the newest attempt at top of the commented section. What am I missing?
– ket
Nov 26 '18 at 19:22
How do you identify the "underlying" Flyout for a specific button?
– mm8
Nov 22 '18 at 13:18
How do you identify the "underlying" Flyout for a specific button?
– mm8
Nov 22 '18 at 13:18
@mm8 Good point - I edited my question to include the previously omitted ItemTemplate. Here SettingsFlyoutView is a user control which leverages SettingsFlyoutViewModel as the backing viewmodel. I'm still having difficulty doing the binding tho; see the newest attempt at top of the commented section. What am I missing?
– ket
Nov 26 '18 at 19:22
@mm8 Good point - I edited my question to include the previously omitted ItemTemplate. Here SettingsFlyoutView is a user control which leverages SettingsFlyoutViewModel as the backing viewmodel. I'm still having difficulty doing the binding tho; see the newest attempt at top of the commented section. What am I missing?
– ket
Nov 26 '18 at 19:22
add a comment |
1 Answer
1
active
oldest
votes
0
Here you go
<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>
answered Nov 22 '18 at 15:44
RajNRajN
3,65521021
When I add the<Controls:Flyout>line item, I get a runtime exceptionItems collection must be empty before using ItemsSource.One difference between my scenario and the Mahapps website snippet is that their example doesn't use an ItemContainerStyle, which I believe I need for binding to my viewmodel properties based on the link at top. Any thoughts how to resolve the exception?
– ket
Nov 26 '18 at 18:52
I can't reproduce your issue. Can you post your code sample to look at it?
– RajN
Nov 26 '18 at 20:52
I have placed a copy of the project as it throws the exception here: 1drv.ms/f/s!AsvM6Pyke4A6hCRyovosrs0kIKGG, The content above can be found in MainWindow.xaml.
– ket
Nov 27 '18 at 17:04
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418921%2fhow-to-bind-to-metro-flyout-itemcontainerstyle-property-from-button-in-rightwind%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Here you go
<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>
answered Nov 22 '18 at 15:44
RajNRajN
3,65521021
When I add the<Controls:Flyout>line item, I get a runtime exceptionItems collection must be empty before using ItemsSource.One difference between my scenario and the Mahapps website snippet is that their example doesn't use an ItemContainerStyle, which I believe I need for binding to my viewmodel properties based on the link at top. Any thoughts how to resolve the exception?
– ket
Nov 26 '18 at 18:52
I can't reproduce your issue. Can you post your code sample to look at it?
– RajN
Nov 26 '18 at 20:52
I have placed a copy of the project as it throws the exception here: 1drv.ms/f/s!AsvM6Pyke4A6hCRyovosrs0kIKGG, The content above can be found in MainWindow.xaml.
– ket
Nov 27 '18 at 17:04
add a comment |
0
Here you go
<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>
answered Nov 22 '18 at 15:44
RajNRajN
3,65521021
When I add the<Controls:Flyout>line item, I get a runtime exceptionItems collection must be empty before using ItemsSource.One difference between my scenario and the Mahapps website snippet is that their example doesn't use an ItemContainerStyle, which I believe I need for binding to my viewmodel properties based on the link at top. Any thoughts how to resolve the exception?
– ket
Nov 26 '18 at 18:52
I can't reproduce your issue. Can you post your code sample to look at it?
– RajN
Nov 26 '18 at 20:52
I have placed a copy of the project as it throws the exception here: 1drv.ms/f/s!AsvM6Pyke4A6hCRyovosrs0kIKGG, The content above can be found in MainWindow.xaml.
– ket
Nov 27 '18 at 17:04
add a comment |
0
0
0
Here you go
<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>
answered Nov 22 '18 at 15:44
RajNRajN
3,65521021
Here you go
<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>
answered Nov 22 '18 at 15:44
RajNRajN
3,65521021
answered Nov 22 '18 at 15:44
RajNRajN
3,65521021
answered Nov 22 '18 at 15:44
RajNRajN
3,65521021
answered Nov 22 '18 at 15:44
RajNRajN
3,65521021
3,65521021
When I add the<Controls:Flyout>line item, I get a runtime exceptionItems collection must be empty before using ItemsSource.One difference between my scenario and the Mahapps website snippet is that their example doesn't use an ItemContainerStyle, which I believe I need for binding to my viewmodel properties based on the link at top. Any thoughts how to resolve the exception?
– ket
Nov 26 '18 at 18:52
I can't reproduce your issue. Can you post your code sample to look at it?
– RajN
Nov 26 '18 at 20:52
I have placed a copy of the project as it throws the exception here: 1drv.ms/f/s!AsvM6Pyke4A6hCRyovosrs0kIKGG, The content above can be found in MainWindow.xaml.
– ket
Nov 27 '18 at 17:04
add a comment |
When I add the<Controls:Flyout>line item, I get a runtime exceptionItems collection must be empty before using ItemsSource.One difference between my scenario and the Mahapps website snippet is that their example doesn't use an ItemContainerStyle, which I believe I need for binding to my viewmodel properties based on the link at top. Any thoughts how to resolve the exception?
– ket
Nov 26 '18 at 18:52
I can't reproduce your issue. Can you post your code sample to look at it?
– RajN
Nov 26 '18 at 20:52
I have placed a copy of the project as it throws the exception here: 1drv.ms/f/s!AsvM6Pyke4A6hCRyovosrs0kIKGG, The content above can be found in MainWindow.xaml.
– ket
Nov 27 '18 at 17:04
When I add the
<Controls:Flyout> line item, I get a runtime exception Items collection must be empty before using ItemsSource. One difference between my scenario and the Mahapps website snippet is that their example doesn't use an ItemContainerStyle, which I believe I need for binding to my viewmodel properties based on the link at top. Any thoughts how to resolve the exception?– ket
Nov 26 '18 at 18:52
When I add the
<Controls:Flyout> line item, I get a runtime exception Items collection must be empty before using ItemsSource. One difference between my scenario and the Mahapps website snippet is that their example doesn't use an ItemContainerStyle, which I believe I need for binding to my viewmodel properties based on the link at top. Any thoughts how to resolve the exception?– ket
Nov 26 '18 at 18:52
I can't reproduce your issue. Can you post your code sample to look at it?
– RajN
Nov 26 '18 at 20:52
I can't reproduce your issue. Can you post your code sample to look at it?
– RajN
Nov 26 '18 at 20:52
I have placed a copy of the project as it throws the exception here: 1drv.ms/f/s!AsvM6Pyke4A6hCRyovosrs0kIKGG, The content above can be found in MainWindow.xaml.
– ket
Nov 27 '18 at 17:04
I have placed a copy of the project as it throws the exception here: 1drv.ms/f/s!AsvM6Pyke4A6hCRyovosrs0kIKGG, The content above can be found in MainWindow.xaml.
– ket
Nov 27 '18 at 17:04
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418921%2fhow-to-bind-to-metro-flyout-itemcontainerstyle-property-from-button-in-rightwind%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
How do you identify the "underlying" Flyout for a specific button?
– mm8
Nov 22 '18 at 13:18
@mm8 Good point - I edited my question to include the previously omitted ItemTemplate. Here SettingsFlyoutView is a user control which leverages SettingsFlyoutViewModel as the backing viewmodel. I'm still having difficulty doing the binding tho; see the newest attempt at top of the commented section. What am I missing?
– ket
Nov 26 '18 at 19:22