CODEWITHSUNDEEP
c#xamlwin-universal-appwindows-10-universal
user3821206
user3821206

Reputation: 619

make a content Dialog movable like the one in the Groove app

I have created a ContentDialog to apply a Style (that I can't apply with a Message Dialog and a PopUp),but I am having problem with it,it's not movable or I can't close it like the Frame that appears when I click on the button "Connexion"in the Groove App enter image description here

have you please any idea,which part I can modify in the ContentDialog style to get this ContentDialog movable and close it like the image on top

I work on a universal app

Upvotes: 3

Views: 2059

Answers (4)

E. A. Bagby
E. A. Bagby

Reputation: 930

Updated suggestion. I'm using WinUI 3, but this UI aspect seems to function the same with WinUI as with UWP:

It is possible to limit moving the ContentDialog to only when clicking on a custom "header," similar to how WinForms Modal dialogs work (with the exception that the ContentDialog cannot leave its parent window).

Define a ĥeader region using a grid at the top of your ContentDialog. Create events handlers for PointerPressed and PointerReleased:

    <Grid x:Name="HeaderGrid"
        PointerPressed="HeaderGrid_PointerPressed"
        PointerReleased="HeaderGrid_PointerReleased">

In the code behind, use the pointer events to set the ManipulationModes and to subscribe/unsubscribe to a custom manipulation delta handler, like so:

    private void HeaderGrid_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        this.ManipulationMode = ManipulationModes.All;
        this.ManipulationDelta += ManipulationDeltaHandler;
    }

    private void HeaderGrid_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        this.ManipulationMode = ManipulationModes.None;
        this.ManipulationDelta -= ManipulationDeltaHandler;
    }

    private void ManipulationDeltaHandler(object sender, ManipulationDeltaRoutedEventArgs e)
    {
    if (!e.IsInertial)
        this.Margin = new Thickness(
            this.Margin.Left + e.Delta.Translation.X,
            this.Margin.Top + e.Delta.Translation.Y,
            this.Margin.Left - e.Delta.Translation.X,
            this.Margin.Top - e.Delta.Translation.Y
        );
    }

Upvotes: 0

Genadiy Dimitrov
Genadiy Dimitrov

Reputation: 31

This is How I did it as I didn't found any answers from 4 years till now :)

                            var dialog = new ContentDialog()
                            {
                                Title = "This is a Title!",
                                ManipulationMode = ManipulationModes.All,
                            };
                            dialog.ManipulationDelta += delegate (object sender, ManipulationDeltaRoutedEventArgs e)
                            {
                                if(!e.IsInertial)
                                    dialog.Margin = new Thickness(
                                        dialog.Margin.Left + e.Delta.Translation.X,
                                        dialog.Margin.Top + e.Delta.Translation.Y,
                                        dialog.Margin.Left - e.Delta.Translation.X,
                                        dialog.Margin.Top - e.Delta.Translation.Y
                                        );
                            };

Upvotes: 3

Grace Feng
Grace Feng

Reputation: 16652

have you please any idea,which part I can modify in the ContentDialog style to get this ContentDialog movable and close it like the image on top.

I'm afraid ContentDialog is not movable, and the image you showed in the Groove App or in the System's mail app is not a ContentDialog, actually, this “Dialog” is called by UserDataAccountManager.ShowAddAccountAsync. If we used the ProcessMonitor to track this UI, we will find that this is a system app C:\Windows\SystemApps\Microsoft.AccountsControl_cw5n1h2txyewy. You may see the pictures and information in the similar question on SO: UWP Modal Window.

For you problem, we can’t launch the system app like Microsoft.AccountsControl for result, we can only call it using API UserDataAccountManager.ShowAddAccountAsync. But you can create a UWP app, and launch this app for result from another app, to do this, please refer to Launch an app for results.

Or if you just want a movable UI, you can create a new window in your app, and change the size of this new window, make it popping behavior like a ContentDialog, but this new window will show your app's title which can't be removed.

How to create a new window? For example:

    private async void OnClick(object sender, RoutedEventArgs e)
    {
        var newCoreAppView = CoreApplication.CreateNewView();
        var appView = ApplicationView.GetForCurrentView();
        await newCoreAppView.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Low, async () =>
        {
            var window = Window.Current;
            var newAppView = ApplicationView.GetForCurrentView();

            var frame = new Frame();
            window.Content = frame;

            frame.Navigate(typeof(BlankPage));            
            window.Activate();
            await ApplicationViewSwitcher.TryShowAsStandaloneAsync(newAppView.Id, ViewSizePreference.Default, appView.Id, ViewSizePreference.Default);

        });
    }

And how to change the size of the new Window? For example in the cs file of the page showed in the new window:

public BlankPage()
        {
            this.InitializeComponent();
            this.Loaded += Page_Loaded;
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            var s = ApplicationView.GetForCurrentView();
            s.TryResizeView(new Size { Width = 600, Height = 320 });
        }

This will make a 600 width and 320 height window.

Upvotes: 7

thang2410199
thang2410199

Reputation: 1942

I think you can do it the other way:

  1. Create a UserControl, define the UI like the pop up.
  2. Set ManipulationMode to Translate.
  3. Handle ManipulationDelta event to move
  4. the UserControll (lets put a CompositeTransform as RenderTransform).
  5. Implement animation as you want Use the UserControll in your Page

Upvotes: 1

Related Questions