ContentDialog max width

Question

I'm trying to create a settings menu in my app like this

I know how to do it but I have a problem with the width on content dialog, apparently there is a limit on width.

Here's code for my content dialog:

Title="" Margin="12,0,-12,0" HorizontalAlignment="Stretch" Width="800" Height="600" VerticalAlignment="Stretch" Background="{x:Null}">
<Grid x:Name="Main" ScrollViewer.VerticalScrollBarVisibility="Auto" Width="800">
    <Grid.RowDefinitions>
        <RowDefinition Height="58"/>
        <RowDefinition Height="58"/>
        <RowDefinition/>
        <RowDefinition Height="76"/>
    </Grid.RowDefinitions>
    <TextBox x:Name="Title_TextBox" Text="" Margin="10,10,10,0" PlaceholderText="Please enter your story title..." RequestedTheme="Light" FontSize="16" MaxLength="50" Grid.Row="1" />
    <TextBox x:Name="Experience_Text" Text="" Grid.Row="2" Margin="10,10,10,0"  PlaceholderText="Please tell your experience..." MaxLength="500" FontSize="16" TextWrapping="Wrap" MinHeight="42" AcceptsReturn="True" RequestedTheme="Light" ScrollViewer.VerticalScrollBarVisibility="Auto" VerticalAlignment="Center" Height="190" />
    <Grid x:Name="CharacterGrid" Grid.Row="3" Margin="10,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="48"/>
            <ColumnDefinition Width="64"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="CharacterLeft" Margin="0" TextWrapping="Wrap" Text="" TextAlignment="Right" FontSize="16" Grid.Column="2" VerticalAlignment="Top" RequestedTheme="Light" />
        <Button x:Name="CameraButton" FontFamily="Segoe MDL2 Assets" Content="&#xE722;" Background="Transparent" VerticalAlignment="Top" Margin="0,5,0,0" HorizontalAlignment="Left" FontSize="21.333" RequestedTheme="Light" Width="48" Height="48"/>
    </Grid>
    <Grid x:Name="LocationGrid" Margin="10,10,10,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="48"/>
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="LocText" Margin="0" TextWrapping="Wrap" Text="Location will be here...." FontSize="16" VerticalAlignment="Center" RequestedTheme="Light" TextAlignment="Center"/>
        <Button x:Name="LocationButton" FontFamily="Segoe MDL2 Assets" Content="&#xE81D;" Background="Transparent" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Right"  FontSize="21.333" RequestedTheme="Light" Width="48" Height="48" Grid.Column="1"/>
    </Grid>
</Grid>

Sorry, I don't think I got your second comment? I assume you mean that there is a maximum width limit on content dialogue which you are trying to override and you don't know if it is possible? — NSNoob, Aug 28 '17 at 11:05

score 24 · Answer 1 · answered Aug 28 '17 at 11:15

In your App.xaml, try setting the ContentDialogMaxWidth to say, 800. The default is 548. You might want to increase the height too.

<Application.Resources>
    <x:Double x:Key="ContentDialogMaxWidth">800</x:Double>
    <x:Double x:Key="ContentDialogMaxHeight">756</x:Double>
</Application.Resources>

score 2 · Answer 2 · answered Mar 28 '18 at 10:57

2

just add this code after the initialize component

this.width = Window.Current.Bounds.Width;

and the content dialog will get your screen width

answered Mar 28 '18 at 10:57

score 1 · Accepted Answer · answered Apr 15 '18 at 06:17

1

All that I Have to do is just add this code after the initialize component

this.width = Window.Current.Bounds.Width;

and the content dialog will get your screen width.. thanks everyone hope this will help anyone search for it !

answered Apr 15 '18 at 06:17

Louay Sleman

1,794
2
15
39

score 1 · Answer 4 · answered Apr 02 '23 at 20:59

Nah, Better you design you ContentDialogs seperatly, only add this to the Content Dialog XAML:

<ContentDialog.Resources>
      <x:Double x:Key="ContentDialogMaxWidth">1200</x:Double>
      <x:Double x:Key="ContentDialogMaxHeight">1000</x:Double>`
</ContentDialog.Resources>

Now you any size you want for your ContentDialogs :)

score 0 · Answer 5 · edited Aug 26 '23 at 20:44

In addition to the existing solutions, if someone wants to increase the width of a custom content dialog while keeping the default WinUI style (and perhaps UWP, not sure), you can do this in the custom content dialog XAML file:

<ContentDialog.Resources>
    <!--ContentDialog style inheritance; Issue : https://github.com/microsoft/microsoft-ui-xaml/issues/6154-->
    <Style TargetType="local:CustomContentDialogName" BasedOn="{StaticResource DefaultContentDialogStyle}"/>

    <!-- Overriding ContentDialogMaxWidth value -->
    <x:Double x:Key="ContentDialogMaxWidth">1200</x:Double>
</ContentDialog.Resources>

ContentDialog max width

5 Answers5

Linked