Unable to set width of ContentDialog

knightmeister commented 5 years ago

Describe the bug Using the properties MinWidth, MaxWidth and Width have no effect on the width of the ContentDialog but break the ability to resize the window and keep the ContentDialog centered. There are numerous questions on StackOverflow about setting the content dialog width. The solution is always to change the ContentDialogMaxWidth in App.xaml but even setting that does not work as expected.

Steps to reproduce the bug Add a button to a page and use the following event handler:

        private async void Button_Click(object sender, RoutedEventArgs e)
        {
            ContentDialog dialog = new ContentDialog();
            string content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius vehicula orci. Integer erat lectus, congue in maximus ac, venenatis sed risus. Fusce odio nisl, luctus id rhoncus a, pretium eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque cursus nibh, id venenatis lectus vulputate id. Curabitur ut ligula bibendum, vehicula tellus in, sodales leo. Suspendisse sed tellus imperdiet, ullamcorper libero non, venenatis enim. Quisque quis nibh bibendum, aliquam nunc vel, cursus erat.";
            content += "\n\nIn eleifend placerat velit eget tempus. Duis eget augue tellus. Mauris fringilla vehicula cursus. Nunc maximus libero et nisi gravida vulputate. Sed consectetur id urna quis consectetur. Quisque id nulla venenatis dolor semper rhoncus. Ut metus erat, tincidunt ut consectetur vitae, suscipit a ligula. Etiam mollis nec nibh quis suscipit. Aliquam quis eleifend mauris. Nunc consequat id purus vitae efficitur. Fusce quis imperdiet nibh, eget mattis urna. In vitae ipsum commodo, feugiat neque non, tempus urna. Praesent cursus nisi et ex interdum, elementum ultricies nisi eleifend. Etiam metus lorem, vulputate a leo nec, molestie porttitor leo. Proin eget dictum orci.";
            content += "\n\nNam pellentesque lacus orci, vel tempus turpis semper id. Mauris ut egestas mi, a facilisis ligula. Aenean dapibus nisi eget sapien varius, et suscipit turpis imperdiet. Aenean blandit ornare porta. Praesent hendrerit, ligula at ullamcorper euismod, magna enim venenatis neque, ac tincidunt magna elit in eros. Nulla viverra consectetur faucibus. Etiam tincidunt ornare tortor vitae viverra. Quisque a risus in ligula sagittis tempus. Maecenas consequat lectus ornare odio sagittis, quis feugiat quam facilisis. Quisque ac ante mauris. Sed convallis pellentesque lorem, a accumsan erat commodo eu. Vivamus malesuada pharetra purus, nec hendrerit sapien ultricies id. In rutrum mauris libero, id finibus urna imperdiet vitae. Sed ultrices ornare mi, eu eleifend dui tempor sed. Praesent nec ante mollis, ornare quam eget, sollicitudin eros.";
            content += "\n\nCras lacinia nisi at velit tempus pretium. Duis quis enim mi. Nunc euismod, urna ut vulputate eleifend, tortor augue lacinia dui, eu pulvinar odio urna quis arcu. Morbi eget eleifend nibh, sit amet ultrices mi. Curabitur convallis urna ut neque dignissim malesuada. Morbi eget mollis nulla. Praesent vel libero placerat, rhoncus mi eget, auctor tortor. Integer eget ornare odio, vitae mattis diam. Praesent vestibulum varius eleifend. Quisque egestas, quam quis elementum pharetra, enim tortor scelerisque arcu, at posuere nisi eros sed ex. Etiam rutrum porttitor urna non vestibulum.";
            dialog.Content = content;

            dialog.MinWidth = this.ActualWidth * .8;
            dialog.Width = this.ActualWidth * .8;
            dialog.MaxWidth = this.ActualWidth * .8;

            await dialog.ShowAsync();
        }

When updating the ContentDialogMaxWidth:

...
<Application.Resources>
    <x:Double x:Key="ContentDialogMaxWidth">9999</x:Double>
</Application.Resources>
...

Expected behavior I would expect the following behaviour:

(Without overriding ContentDialogMaxWidth) The dialog consumes 80% of the window size
Resizing the window keeps the ContentDialog horizontally centered

Actual behaviour

When setting MinWidth/MaxWidth/Width, the ContentDialog is no longer centered (see screenshot 2)
When setting MinWidth/MaxWidth/Width properties, the ContentDialog is no longer repositioned and recentered when the window is resized (see screenshot 3)
When setting ContentDialogMaxWidth, in conjunction with MinWidth/MaxWidth/Width 80% of the width is used however the dialog is not horizontally centered and does not recenter as the dialog is resized.

Screenshots Screenshot 1: None of MinWidth/MaxWidth/Width are set:

The following screenshots have MinWidth/MaxWidth and Width set to this.ActualWidth * .8

Screenshot 2: ContentDialog is no longer centered:

Screenshot 3: ContentDialog is not repositioned on resize:

The following screenshots have MinWidth/MaxWidth and Width set to this.ActualWidth * .8 with ContentDialogMaxWidth = 9999

Version Info 1809 using the Windows inbuilt controls

NuGet package version: N/A

jevansaks commented 5 years ago

Good bug. I believe this is because ContentDialog is a FrameworkElement but it moves its content to a popup so the layout-related properties don't take effect. We can probably make the Width/Height properties work.

JackScottAU commented 5 years ago

This is impacting me as well, it would be great to get a fix. :)

knightmeister commented 5 years ago

Hi guys, I note the tag "needs-winui-3" has been added to this. Is there a work around that would allow me to increase the size of a content dialog?

jevansaks commented 5 years ago

@yulikl @kmahone any thoughts on a workaround for this?

YuliKl commented 5 years ago

@knightmeister, there's a resource in generic.xaml that controls ContentDialog's width:

<x:Double x:Key="ContentDialogMaxWidth">548</x:Double>

You should be able to set this double to a larger value within your App.xaml resources.

Edit: reread your original post and this is exactly the resource you're noting doesn't work. I'm not sure why that is. I'm not aware of any other workarounds.

What happens when you only change ContentDialogMaxWidth, without also specifying

            dialog.MinWidth = this.ActualWidth * .8;
            dialog.Width = this.ActualWidth * .8;
            dialog.MaxWidth = this.ActualWidth * .8;

?

harvinders commented 4 years ago

It would also be great if there is a way to set width based on the main windows width breakpoints.

NPadrutt commented 4 years ago

@knightmeister, there's a resource in generic.xaml that controls ContentDialog's width:
<x:Double x:Key="ContentDialogMaxWidth">548</x:Double>
You should be able to set this double to a larger value within your App.xaml resources.

Edit: reread your original post and this is exactly the resource you're noting doesn't work. I'm not sure why that is. I'm not aware of any other workarounds.

What happens when you only change ContentDialogMaxWidth, without also specifying
            dialog.MinWidth = this.ActualWidth * .8;
            dialog.Width = this.ActualWidth * .8;
            dialog.MaxWidth = this.ActualWidth * .8;
?

I tried that, but it didn't work as well.

jhwheuer commented 4 years ago

So what we can say is that for larger payloads it is back to a in-page Grid whose Visibility gets turned on and off, or maybe a Flyout? Oh dear, because this behavior has been unchanged for more than a year now... Quite frankly, setting absolute values in a static resource is just -bad- style (pun intended).

harvinders commented 3 years ago

Setting <x:Double x:Key="ContentDialogMaxWidth">800</x:Double> in app.xaml on Windows 10 1909, worked for me.

sigmarsson commented 3 years ago

this.InitializeComponent(); this.MaxWidth = App.MainWindow.Bounds.Width;

does not get me either to the desired width.

sigmarsson commented 3 years ago

Is there a timeline to overhaul the ContentDialog to

satisfy its desired position and dimension
better accomodate contents onto the dialog ?

sigmarsson commented 3 years ago

Just as a spin-off comment , for individuals this issue becomes exigent, may want to get a little familiar with the respective Infragistics control. You can tailor this one's style to be an arbitrary dialog as custom window class.

alexdi220 commented 3 years ago

Any updates? 2022 is coming but the ContentDialog (the rectangle with content) still can't measure width by content.

alexdi220 commented 3 years ago

Pull request https://github.com/microsoft/microsoft-ui-xaml/pull/5872

Wufus commented 2 years ago

Pull request #5872

The width of the ContentDialog does not change, only moves to the left. UWP Microsoft.NETCore.UniversalWindowsPlatform 6.2.13 Microsoft.UI.Xaml 2.7.0

Helps only set ContentDialogMaxWidth

karthikraja-arumugam commented 2 years ago

I'm still getting this issue, unable to set width, max-width, and padding properties of content dialog. Please fix this bug, ContentDialog has some good styles but these kinds of restrictions make it unusable.

gwalschlager commented 2 years ago

Yes, this is still an issue for me too. Adding a line like 1600</x:Double> to your App.xaml section is a workaround and dialog will set its width to the contents as long as contents are within that value. However, the dialog buttons at bottom become inordinately wide along with expanding to content width. A real solution is still needed.

knightmeister commented 2 years ago

Is this still on the radar, to have a functioning modal solution for a windowing operating system? It is absolutely insane that the implementation of ContentDialog is so broken that you cannot properly resize or reposition them. The current implementation works fine for a message box replacement but is absolutely unworkable for any other form of modal task (preferences window, data entry, etc).

I'm hopeful that this can be addressed soon.

hartmape commented 2 years ago

I tried several suggestions and the only thing that worked for me was setting the above mentioned double key in the resources of the content dialog itself. (It did not work in the App.xaml for me).

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

sigmarsson commented 2 years ago

I wonder if it can be scheduled anywhere on the roadmap in 2022 : https://github.com/microsoft/WindowsAppSDK/blob/main/docs/roadmap.md This year both 1.1 and 1.2 will be released.

The version 1.1 does not seem to aim fixing this ContentDialog issue as these are the areas on focus :

Apps can create multiple windows with WinUI3 content on the same UI thread.
Mica & Background Acrylic styles are available for WinUI 3 content.
Improved default and custom title bar with new functionalities like z-order, sizing/resizing, tall title bar, and extended show.
Apps using the Windows App SDK can run with elevated permissions.
Apps that deploy with all their dependencies together are now able to include the Windows App SDK as well. (self-contained deployment)
Apps can push notifications regardless of being packaged/unpackaged, or whether the app is published in the Store.
The environment variables PATH, and PATHEXT can be managed and tracked at runtime using new convenient APIs.
Apps can restart manually or register themselves to be restarted if it was running when a system update occurs.

Padanian commented 2 years ago

+1 for me too. When ContentDialog is called from a Window with ExtendsContentIntoTitleBar = true , it is impossible to drag it around .

jamorais commented 2 years ago

Hi everyone. I also struggled with this a while ago and i don't remember where i saw this but this problem has been "solved" a while ago. This has to do with the order of resource loading. By default when installing WinUI nuget or creating a new Windows App SDK project, the App.xaml file is like this:

<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

problem is when you put your <x:Double x:Key="ContentDialogMaxWidth">9999</x:Double> in the other app resources, somehow it gets loaded before the WinUI styles. and so it's ignored. To solve this, the WInUI team created a way to ensure their resources are loaded first and then yours so you can override them.

<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    xmlns:local="using:App1" >
    <Application.Resources>
        <controls:XamlControlsResources>
            <controls:XamlControlsResources.MergedDictionaries>
                <ResourceDictionary>
                    <x:Double x:Key="ContentDialogMaxWidth">1000</x:Double>
                </ResourceDictionary>

            </controls:XamlControlsResources.MergedDictionaries>
        </controls:XamlControlsResources>
    </Application.Resources>
</Application>

Notice we now import the namespace xmlns:controls="using:Microsoft.UI.Xaml.Controls" and then our overrides go into a special "controls:XamlControlsResources" This works flawlessly.

wadeamaral commented 2 years ago

I was struggling with this myself for a while, the recommended solution provided by @jamorais worked for me. Thank you!

sigmarsson commented 2 years ago

@jamorais does it work for an unpackaged or packaged application ? for me unpackaged and takes no effect.

jamorais commented 2 years ago

@jamorais does it work for an unpackaged or packaged application ? for me unpackaged and takes no effect.

@sigmarsson, never tried it on unpackaged.... i'll try and get back to you today.

jamorais commented 2 years ago

Hey @sigmarsson , it worked fine for me. I attached my simple test.

test_unpackaged.zip

sigmarsson commented 2 years ago

@jamorais Thank you much for your time and effort. Could you recommend an alternative control to replace cd ?

jarlbrak commented 2 years ago

Hi everyone. I also struggled with this a while ago and i don't remember where i saw this but this problem has been "solved" a while ago. This has to do with the order of resource loading. By default when installing WinUI nuget or creating a new Windows App SDK project, the App.xaml file is like this:
<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                
            </ResourceDictionary.MergedDictionaries>
            
        </ResourceDictionary>
    </Application.Resources>
</Application>
problem is when you put your <x:Double x:Key="ContentDialogMaxWidth">9999</x:Double> in the other app resources, somehow it gets loaded before the WinUI styles. and so it's ignored. To solve this, the WInUI team created a way to ensure their resources are loaded first and then yours so you can override them.
<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    xmlns:local="using:App1" >
    <Application.Resources>
        <controls:XamlControlsResources>
            <controls:XamlControlsResources.MergedDictionaries>
                <ResourceDictionary>
                    <x:Double x:Key="ContentDialogMaxWidth">1000</x:Double>
                </ResourceDictionary>

            </controls:XamlControlsResources.MergedDictionaries>
        </controls:XamlControlsResources>
    </Application.Resources>
</Application>
Notice we now import the namespace xmlns:controls="using:Microsoft.UI.Xaml.Controls" and then our overrides go into a special "controls:XamlControlsResources" This works flawlessly.

FYI, this is fixed in Windows App SDK 1.1.4

You can now go back to using this as you typically would:

<Application
    x:Class="App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <ResourceDictionary>
                    <x:Double x:Key="ContentDialogMaxWidth">1000</x:Double>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

TimKEviden commented 2 years ago

An upgrade to 1.1.4 did not solve the problem.

I really do not get how this all works hopefully someone can help me and we can solve this.

What do we try to achieve by wrapping the Resource directories in this <controls:XamlControlsResources>? Is it only to be sure that the WinUI resources are loaded before our resources?

Why do I need to state <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" /> We did not use this until now but somehow now the application crashes if we do not use it. We located the part which is responsible for the application crashing which are RadioMenuFlyoutItem items. If we comment those out the application works again and we can take a look at it. Nevertheless the application is not styled correctly anymore (for example the buttons do not have correctly rounded corners anymore). To me this seems like something is still wrong with loading order.

Thanks in advance guys!

asierpn commented 2 years ago

The only way we have found to change the ContentDialog width is overriding the default control template:

  <x:Double x:Key="ContentDialogMaxWidth">1200</x:Double>
  <x:Double x:Key="ContentDialogMaxHeight">756</x:Double>
  <Style TargetType="ContentDialog">
    <Setter Property="Foreground"
            Value="{ThemeResource ContentDialogForeground}" />
    <Setter Property="Background"
            Value="{ThemeResource ContentDialogBackground}" />
    <Setter Property="BorderThickness"
            Value="{ThemeResource ContentDialogBorderWidth}" />
    <Setter Property="BorderBrush"
            Value="{ThemeResource ContentDialogBorderBrush}" />
    <Setter Property="IsTabStop"
            Value="False" />
    <Setter Property="PrimaryButtonStyle"
            Value="{ThemeResource DefaultButtonStyle}" />
    <Setter Property="SecondaryButtonStyle"
            Value="{ThemeResource DefaultButtonStyle}" />
    <Setter Property="CloseButtonStyle"
            Value="{ThemeResource DefaultButtonStyle}" />
    <Setter Property="CornerRadius"
            Value="{ThemeResource OverlayCornerRadius}" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ContentDialog">
          <Border x:Name="Container">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="DialogShowingStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition To="DialogHidden">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                     Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                Value="Visible" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                     Storyboard.TargetProperty="IsHitTestVisible">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                Value="False" />
                      </ObjectAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform"
                                                     Storyboard.TargetProperty="ScaleX">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0"
                                                Value="1.0" />
                        <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationDuration}"
                                              KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
                                              Value="1.05" />
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform"
                                                     Storyboard.TargetProperty="ScaleY">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0"
                                                Value="1.0" />
                        <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationDuration}"
                                              KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
                                              Value="1.05" />
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                     Storyboard.TargetProperty="Opacity">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0"
                                                Value="1.0" />
                        <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
                                              Value="0.0" />
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualTransition>
                  <VisualTransition To="DialogShowing">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                     Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                Value="Visible" />
                      </ObjectAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform"
                                                     Storyboard.TargetProperty="ScaleX">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0"
                                                Value="1.05" />
                        <SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}"
                                              KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
                                              Value="1.0" />
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform"
                                                     Storyboard.TargetProperty="ScaleY">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0"
                                                Value="1.05" />
                        <SplineDoubleKeyFrame KeyTime="{StaticResource ControlNormalAnimationDuration}"
                                              KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
                                              Value="1.0" />
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                     Storyboard.TargetProperty="Opacity">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0"
                                                Value="0.0" />
                        <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
                                              Value="1.0" />
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="DialogHidden" />
                <VisualState x:Name="DialogShowing">
                  <VisualState.Setters>
                    <Setter Target="PrimaryButton.IsTabStop"
                            Value="True" />
                    <Setter Target="SecondaryButton.IsTabStop"
                            Value="True" />
                    <Setter Target="CloseButton.IsTabStop"
                            Value="True" />
                    <Setter Target="LayoutRoot.Visibility"
                            Value="Visible" />
                    <Setter Target="BackgroundElement.TabFocusNavigation"
                            Value="Cycle" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="DialogShowingWithoutSmokeLayer">
                  <VisualState.Setters>
                    <Setter Target="PrimaryButton.IsTabStop"
                            Value="True" />
                    <Setter Target="SecondaryButton.IsTabStop"
                            Value="True" />
                    <Setter Target="CloseButton.IsTabStop"
                            Value="True" />
                    <Setter Target="LayoutRoot.Visibility"
                            Value="Visible" />
                    <Setter Target="LayoutRoot.Background"
                            Value="{x:Null}" />
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="DialogSizingStates">
                <VisualState x:Name="DefaultDialogSizing" />
                <VisualState x:Name="FullDialogSizing">
                  <VisualState.Setters>
                    <Setter Target="BackgroundElement.VerticalAlignment"
                            Value="Stretch" />
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="ButtonsVisibilityStates">
                <VisualState x:Name="AllVisible">
                  <VisualState.Setters>
                    <Setter Target="FirstSpacer.Width"
                            Value="{ThemeResource ContentDialogButtonSpacing}" />
                    <Setter Target="SecondaryColumn.Width"
                            Value="*" />
                    <Setter Target="SecondaryButton.(Grid.Column)"
                            Value="2" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NoneVisible">
                  <VisualState.Setters>
                    <Setter Target="CommandSpace.Visibility"
                            Value="Collapsed" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PrimaryVisible">
                  <VisualState.Setters>
                    <Setter Target="PrimaryButton.(Grid.Column)"
                            Value="4" />
                    <Setter Target="SecondaryButton.Visibility"
                            Value="Collapsed" />
                    <Setter Target="CloseButton.Visibility"
                            Value="Collapsed" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="SecondaryVisible">
                  <VisualState.Setters>
                    <Setter Target="SecondaryButton.(Grid.Column)"
                            Value="4" />
                    <Setter Target="PrimaryButton.Visibility"
                            Value="Collapsed" />
                    <Setter Target="CloseButton.Visibility"
                            Value="Collapsed" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="CloseVisible">
                  <VisualState.Setters>
                    <Setter Target="PrimaryButton.Visibility"
                            Value="Collapsed" />
                    <Setter Target="SecondaryButton.Visibility"
                            Value="Collapsed" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PrimaryAndSecondaryVisible">
                  <VisualState.Setters>
                    <Setter Target="SecondaryButton.(Grid.Column)"
                            Value="4" />
                    <Setter Target="CloseButton.Visibility"
                            Value="Collapsed" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PrimaryAndCloseVisible">
                  <VisualState.Setters>
                    <Setter Target="SecondaryButton.Visibility"
                            Value="Collapsed" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="SecondaryAndCloseVisible">
                  <VisualState.Setters>
                    <Setter Target="PrimaryButton.Visibility"
                            Value="Collapsed" />
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="DefaultButtonStates">
                <VisualState x:Name="NoDefaultButton" />
                <VisualState x:Name="PrimaryAsDefaultButton">
                  <VisualState.Setters>
                    <Setter Target="PrimaryButton.Style"
                            Value="{StaticResource AccentButtonStyle}" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="SecondaryAsDefaultButton">
                  <VisualState.Setters>
                    <Setter Target="SecondaryButton.Style"
                            Value="{StaticResource AccentButtonStyle}" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="CloseAsDefaultButton">
                  <VisualState.Setters>
                    <Setter Target="CloseButton.Style"
                            Value="{StaticResource AccentButtonStyle}" />
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="DialogBorderStates">
                <VisualState x:Name="NoBorder" />
                <VisualState x:Name="AccentColorBorder">
                  <VisualState.Setters>
                    <Setter Target="BackgroundElement.BorderBrush"
                            Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid x:Name="LayoutRoot"
                  contract5Present:Visibility="Collapsed">
              <Rectangle x:Name="SmokeLayerBackground"
                         Fill="{ThemeResource ContentDialogSmokeFill}" />
              <Border x:Name="BackgroundElement"
                      Background="{TemplateBinding Background}"
                      FlowDirection="{TemplateBinding FlowDirection}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BackgroundSizing="InnerBorderEdge"
                      CornerRadius="{TemplateBinding CornerRadius}"
                      MinWidth="{StaticResource ContentDialogMinWidth}"
                      MaxWidth="{StaticResource ContentDialogMaxWidth}"
                      MinHeight="{ThemeResource ContentDialogMinHeight}"
                      MaxHeight="{ThemeResource ContentDialogMaxHeight}"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      RenderTransformOrigin="0.5,0.5">
                <Border.RenderTransform>
                  <ScaleTransform x:Name="ScaleTransform" />
                </Border.RenderTransform>
                <Grid x:Name="DialogSpace"
                      CornerRadius="{ThemeResource OverlayCornerRadius}">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                  </Grid.RowDefinitions>
                  <ScrollViewer x:Name="ContentScrollViewer"
                                HorizontalScrollBarVisibility="Disabled"
                                VerticalScrollBarVisibility="Disabled"
                                ZoomMode="Disabled"
                                IsTabStop="False">
                    <Grid Background="{ThemeResource ContentDialogTopOverlay}"
                          Padding="{ThemeResource ContentDialogPadding}"
                          BorderThickness="{ThemeResource ContentDialogSeparatorThickness}"
                          BorderBrush="{ThemeResource ContentDialogSeparatorBorderBrush}">
                      <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                      </Grid.RowDefinitions>
                      <ContentControl x:Name="Title"
                                      Margin="{ThemeResource ContentDialogTitleMargin}"
                                      Content="{TemplateBinding Title}"
                                      ContentTemplate="{TemplateBinding TitleTemplate}"
                                      FontSize="20"
                                      FontFamily="{StaticResource ContentControlThemeFontFamily}"
                                      FontWeight="SemiBold"
                                      Foreground="{TemplateBinding Foreground}"
                                      HorizontalAlignment="Left"
                                      VerticalAlignment="Top"
                                      IsTabStop="False">
                        <ContentControl.Template>
                          <ControlTemplate TargetType="ContentControl">
                            <ContentPresenter Content="{TemplateBinding Content}"
                                              MaxLines="2"
                                              TextWrapping="Wrap"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Margin="{TemplateBinding Padding}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                          </ControlTemplate>
                        </ContentControl.Template>
                      </ContentControl>
                      <ContentPresenter x:Name="Content"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        Content="{TemplateBinding Content}"
                                        FontSize="{StaticResource ControlContentThemeFontSize}"
                                        FontFamily="{StaticResource ContentControlThemeFontFamily}"
                                        Foreground="{TemplateBinding Foreground}"
                                        Grid.Row="1"
                                        TextWrapping="Wrap" />
                    </Grid>
                  </ScrollViewer>
                  <Grid x:Name="CommandSpace"
                        Grid.Row="1"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Bottom"
                        XYFocusKeyboardNavigation="Enabled"
                        Padding="{ThemeResource ContentDialogPadding}"
                        Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition x:Name="PrimaryColumn"
                                        Width="*" />
                      <ColumnDefinition x:Name="FirstSpacer"
                                        Width="0" />
                      <ColumnDefinition x:Name="SecondaryColumn"
                                        Width="0" />
                      <ColumnDefinition x:Name="SecondSpacer"
                                        Width="{ThemeResource ContentDialogButtonSpacing}" />
                      <ColumnDefinition x:Name="CloseColumn"
                                        Width="*" />
                    </Grid.ColumnDefinitions>
                    <Button x:Name="PrimaryButton"
                            IsTabStop="False"
                            Content="{TemplateBinding PrimaryButtonText}"
                            IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}"
                            Style="{TemplateBinding PrimaryButtonStyle}"
                            ElementSoundMode="FocusOnly"
                            HorizontalAlignment="Stretch" />
                    <Button x:Name="SecondaryButton"
                            IsTabStop="False"
                            Content="{TemplateBinding SecondaryButtonText}"
                            IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}"
                            Style="{TemplateBinding SecondaryButtonStyle}"
                            ElementSoundMode="FocusOnly"
                            HorizontalAlignment="Stretch" />
                    <Button x:Name="CloseButton"
                            IsTabStop="False"
                            Grid.Column="4"
                            Content="{TemplateBinding CloseButtonText}"
                            Style="{TemplateBinding CloseButtonStyle}"
                            ElementSoundMode="FocusOnly"
                            HorizontalAlignment="Stretch" />
                  </Grid>
                </Grid>
              </Border>
            </Grid>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Jimex commented 2 years ago

My workaround as blow, instead of changing the width of the ContentDialog, I changed the with of the root element in the dialog.

<ContentDialog x:Class="Test.Views.Dialogs.TestDialog"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               mc:Ignorable="d">
    <ContentDialog.Resources>
        <Thickness x:Key="ContentDialogPadding">5,5,5,5</Thickness>
        <x:Double x:Key="ContentDialogMaxWidth">2000</x:Double>
        <x:Double x:Key="ContentDialogMaxHeight">2000</x:Double>
    </ContentDialog.Resources>
    <Grid x:Name="container" VerticalAlignment="Stretch">

 public TestDialog()
        {
            InitializeComponent();

            container.Width = App.StartupWindow.Bounds.Width * .8;
            container.Height = App.StartupWindow.Bounds.Height * .7;
        }

soroshsabz commented 1 year ago

ITNOA

Any update?!

this problem exist in latest WinUI 3 too.

castorix commented 1 year ago

Any update?! this problem exist in latest WinUI 3 too.

ContentDialogMaxWidth works for me (Windows 10 22H2) since at least 1.1.0

bluelaze commented 10 months ago

hahh，i test a new method, is works for me dialog.Resources["ContentDialogMaxWidth"] = 1080;

        private async void button_add_source_Click(object sender, RoutedEventArgs e)
        {
            ContentDialog dialog = new ContentDialog();

            // XamlRoot must be set in the case of a ContentDialog running in a Desktop app
            dialog.XamlRoot = this.XamlRoot;
            dialog.Title = "Add new source";
            dialog.PrimaryButtonText = "Add";
            dialog.CloseButtonText = "Cancel";
            dialog.DefaultButton = ContentDialogButton.Primary;
            dialog.Resources["ContentDialogMaxWidth"] = 1080;
            dialog.Content = new SourceInfoControl();

            var result = await dialog.ShowAsync();
        }

MPITech commented 8 months ago

dialog.Resources["ContentDialogMaxWidth"] = 1080;

Thank you SO much for this. This problem was driving me crazy. Works flawlessly in WinUI3, SDK 1.5.

kaismic commented 4 months ago

Any updates on this issue? I managed to make mine work using the above mentioned workarounds but I really would like to see this bug getting fixed.

gordext commented 3 months ago

I can't get this to work in a UWP project, if I use:

2000 2000 to change the maxwidth and define the ContentDialog in the xaml, it looks correct in the designer view but when I launch the app is just reverts back to the default maxwidth. I don't understand this. update: Ok I got it working by creating a new contentdialog class

microsoft / microsoft-ui-xaml

Unable to set width of ContentDialog #424