ComboBox content outside window

[redplane]

Hi,

I'm using MaterialDesignInXamlToolkit to make a small app. I have finished configuring material in my app and it worked. But there is a trouble of ComboBox When I make my ComboBox in Grid to be full-width, as long as I open the ComboBox, the context menu display out-side its container.

Here is howit looks:

This is my Login.xaml in which I placed that ComboBox:

<Page x:Class="MainClient.View.Login"
    [..Declaration..]>

    <StackPanel>

        ...

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="256" />
                <ColumnDefinition Width="46*" />
                <ColumnDefinition Width="51*" />
                <ColumnDefinition Width="175*" />
            </Grid.ColumnDefinitions>

            <TextBlock Text="{lex:Loc TITLE_LANGUAGE}" />
            <ComboBox Grid.Column="1"
                      ItemsSource="{Binding AvailableLanguages}"
                      SelectedItem="{Binding SelectedLanguage}" Grid.ColumnSpan="3">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=Key, Converter={StaticResource LanguageTranslatorConverter}}" />
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
        </Grid>

    </StackPanel>
</Page>

Here is my REPO

Thanks

[stigrune]

This is how the ComboBox style in MaterialDesignInXamlToolkit is designed. It will use more width (and height) when the dropdown is open, then when closed.

My suggestion is to not use full-width, seems way too much space based on the content in your screenshot. If you really need it this wide, I would suggest adding a Margin on the ComboBox to keep the dropdown within the application frame.

Same behaviour can also be seen in a standard WPF ComboBox, it will open the dropdown outside the application frame if there is no space:

[redplane]

Do you mean that we need to apply margin to the component that contains combobox ?

[stigrune]

Yes, example:

<ComboBox Grid.Column="1"
                      ItemsSource="{Binding AvailableLanguages}"
                      SelectedItem="{Binding SelectedLanguage}" Grid.ColumnSpan="3" 
                      Margin="0,0,50,0">

[Keboo]

@redplane there is also an attached property that you can set that will cause the popup with the items to show below combo box rather than around it.

<ComboBox materialDesign:ComboBoxAssist.ClassicMode="True" />

[redplane]

@redplane there is also an attached property that you can set that will cause the popup with the items to show below combo box rather than around it.

<ComboBox materialDesign:ComboBoxAssist.ClassicMode="True" />

Hmm... I have tried your solution, but it is still displayed outside window.

But it is Ok, when I set margin Margin="0, 20, 0, 20", theComboBox` display is OK. For me, it is acceptable, but the document should be updated about this :)

Thank you for your help.

[Keboo]

This should be resolved with the ComboBox redesign in 4.2.1