Wrong Size Calculation Of Grid In Flyout

[jessestricker]

I placed a grid control in a flyout and want to have the button at the botton, works perfectly just in the window's content, but in the flyout the size of the grid isn't adjusting to the flyout's size as you can see here:

I used this code:

<Controls:MetroWindow.Flyouts>
        <Controls:Flyout Header="settings" Position="Right">
            <Grid Background="Red" Margin="0">
                <Button x:Name="flyoutSettingsButtonSave" Content="Save" Margin="0,0,10,10" HorizontalAlignment="Right" Width="75" VerticalAlignment="Bottom"/>
                <Label Content="Download language:" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
                <ComboBox x:Name="flyoutSettingsComboboxDownloadlanguage" HorizontalAlignment="Left" Margin="134,14,0,0" VerticalAlignment="Top"/>
            </Grid>
        </Controls:Flyout>
    </Controls:MetroWindow.Flyouts>

[punker76]

hi @Cornyfisch,
i think this is not a problem with flyout. it looks like your code is not right.
try this one to solve your problem

<Controls:MetroWindow.Flyouts>
    <Controls:Flyout Header="settings" Visibility="Visible"
                     IsOpen="True" IsPinnable="True"
                     Position="Right">
      <Grid Background="Red"
            Margin="0">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Label Grid.Column="0"
               Grid.Row="0"
               Content="Download language:"
               Margin="5"
               VerticalAlignment="Center" />
        <ComboBox Grid.Column="1"
                  Grid.Row="0"
                  x:Name="flyoutSettingsComboboxDownloadlanguage"
                  Margin="0,5,5,5"
                  VerticalAlignment="Center" />

        <Button Grid.Column="1"
                Grid.Row="1"
                x:Name="flyoutSettingsButtonSave"
                Content="Save"
                Margin="5"
                HorizontalAlignment="Right"
                Width="75" />
      </Grid>
    </Controls:Flyout>
</Controls:MetroWindow.Flyouts>

hope that helps

jan

[jessestricker]

Yeah thanks man, that fixed it, but why does it work in a page element then while NOT working in a flyout?
With "in a page element" i mean:

<Page x:Class="..."
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
    Title="SettingsFlyoutTestPage">
    <Grid>
        <Button x:Name="flyoutSettingsButtonSave" Content="Save" Margin="0,0,10,10" HorizontalAlignment="Right" Width="75" VerticalAlignment="Bottom"/>
        <Label Content="Download language:" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
        <ComboBox x:Name="flyoutSettingsComboboxDownloadlanguage" HorizontalAlignment="Left" Margin="134,14,0,0" VerticalAlignment="Top"/>
    </Grid>
</Page>

... does following:

Sorry, if i am behaving stupid, but i don't get it...

[jessestricker]

And it's not working 100% like what i expected, the save button should be at the button as you can see in the image in my post above.

[punker76]

ok, i would prefer, that you read more about margins, alignments, grid, etc

here is a good article about that:

http://www.abhishekshukla.com/windows-presentation-foundation/learn-wpf-part-3-layouts-in-windows-presentation-foundation/

http://wpftutorial.net/GridLayout.html

hope that helps

jan

[jessestricker]

Wow, thank you, yes that really helps a lot... but it's still not working probaly...

[punker76]

here my last help to this issue

<Controls:MetroWindow.Flyouts>
    <Controls:Flyout Header="settings" Visibility="Visible"
                     IsOpen="True" IsPinnable="True"
                     Position="Right">
      <Grid Background="Red"
            Margin="0">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Grid.Column="0"
               Grid.Row="0"
               Content="Download language:"
               Margin="5"
               VerticalAlignment="Center" />
        <ComboBox Grid.Column="1"
                  Grid.Row="0"
                  x:Name="flyoutSettingsComboboxDownloadlanguage"
                  Margin="0,5,5,5"
                  VerticalAlignment="Center" />

        <Button Grid.Column="1"
                Grid.Row="1"
                x:Name="flyoutSettingsButtonSave"
                Content="Save"
                Margin="5"
                HorizontalAlignment="Right"
                VerticalAlignment="Bottom"
                Width="75" />
      </Grid>
    </Controls:Flyout>
</Controls:MetroWindow.Flyouts>

hope that helps

jan

[jessestricker]

I've tried that, too... :(

it just won't let me be doing what i wan't, the button really should be at the very bottom of the whole flyout.
Hasn't the grid to reserve the total space of the flyot? Like it would do in eg. a <Window>...</Window> or <Page>...</Page> control.

[jessestricker]

Don't tell me it isn't possible...

[punker76]

hi,

take a look at my checkin #358 (my branch flyouts). i improved/updated the flyouts style and demo example.
i added your example and all works fine!

jan

[jessestricker]

Cloned repo, build the flyout branch, replaced the dll, works just fine :) Thank you very much! Should me merged in when finished.

Cornyfisch

[jessestricker]

How can i mark this closed?

[AzureKitsune]

It's next to the button you press to make a comment. 'Close'.