Datagrid inside of MahApps.Metro Flyout

Question

I am trying to create a flyout for settings using MahApps.Metro inside of a MetroWindow control using WPF. I have created the flyout and have several other radio buttons and seperators. I am now adding a datagrid to hold a list of StockSymbols used as a watch list for my application. What I am having trouble with is properly setting the datagrid so that it does not autogrow past the size of the flyout. If you add rows to the datagrid you can keep adding until it flows offscreen ouside of the window. I would like to do it so that I don't have to manually set the max Height and for it to dynamically grow as the window grows.

Here is my current code for the flyout:

<Controls:MetroWindow.Flyouts>
  <Controls:Flyout Header="Settings"
                   Background="#9f000000"
                   Position="Right"
                   IsOpen="{Binding IsSettingsFlyoutOpen}">
    <DockPanel HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch">
      <StackPanel Orientation="Vertical"
                  VerticalAlignment="Top"
                  HorizontalAlignment="Center"
                  Margin="20,0"
                  DockPanel.Dock="Top">
        <Label Content="Theme"
               Style="{StaticResource DescriptionHeaderStyle}" />
        <StackPanel Orientation="Horizontal">
          <RadioButton Content="Dark"
                       Margin="0,0,5,0"
                       IsChecked="True"
                       Checked="ThemeDark" />
          <RadioButton Content="Light"
                       Margin="0,0,5,0"
                       Checked="ThemeLight" />
        </StackPanel>
        <Separator Margin="0,10,0,10" />
        <Label Content="Accent"
               Style="{StaticResource DescriptionHeaderStyle}" />
        <StackPanel Orientation="Vertical">
          <RadioButton Content="Black"
                       Margin="0,5,0,0" />
          <RadioButton Content="Blue"
                       Margin="0,5,0,0"
                       Checked="AccentBlue" />
          <RadioButton Content="Red"
                       Margin="0,5,0,0"
                       Checked="AccentRed" />
          <RadioButton Content="Green"
                       Margin="0,5,0,0"
                       Checked="AccentGreen" />
          <RadioButton Content="Orange"
                       Margin="0,5,0,0"
                       IsChecked="True"
                       Checked="AccentOrange" />
          <RadioButton Content="Purple"
                       Margin="0,5,0,0"
                       Checked="AccentPurple" />
        </StackPanel>
        <Separator Margin="0,10,0,10" />
      </StackPanel>
      <StackPanel Orientation="Vertical"
                  Height="Auto"
                  VerticalAlignment="Top"
                  DockPanel.Dock="Bottom"
                  Margin="20,0">
        <Label Content="Watch List"
               Style="{StaticResource DescriptionHeaderStyle}" />
        <DataGrid ItemsSource="{Binding WatchList}"
                  AutoGenerateColumns="False"
                  CanUserResizeRows="False"
                  CanUserReorderColumns="False"
                  HeadersVisibility="Column">
          <DataGrid.Columns>
            <DataGridTextColumn Header="Symbol"
                                Binding="{Binding Symbol}" />
            <DataGridTextColumn Header="Name"
                                Binding="{Binding Name}" />
          </DataGrid.Columns>
        </DataGrid>
      </StackPanel>
    </DockPanel>
  </Controls:Flyout>
</Controls:MetroWindow.Flyouts>

Any and all help is appreciated.

Answer 1

I had the same problem. I solved this issue setting the Flyout size. I think the problem occurs when WPF render the grid and the Flyout size is smaller than grid size.

anyway, our Flyout was dynamic, I had to create a Converter to get its size and set my child control to same width

Answer 2

I solved this question by using only a Dock Panel to hold all the controls inside the Flyout. The all controls but the data grid should be set to top docking and no docking set on the datagrid. This then auto sizes the datagrid to fill the remaining space and no more.