none
[UWP]UWP, Resize control RRS feed

All replies

  • Hi,

    Maybe there is an easy way, you can put the control in the ViewBox, the ViewBox can be arbitrarily scaled to ensure that the internal layout does not change. You can add new code to rotate or scale the ViewBox.

    After all, moving, scaling, and rotating are essentially transformations of the control. You can combine them according to your needs.

    Here is document about transform: here.

    Best regards.


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, September 6, 2019 11:35 AM
  • The viewbox does not really resize anything, it scales.  If a control has a width of 100 the viewbox can scale the control up or down to make it appear bigger but it's width is still 100.  Also, the viewbox doesn't provide any built-in way to perform any of the above mentioned transformations.

    So, things like textboxes don't re-wrap text (as the control really hasn't changed).

    The viewbox may work for the OP but it doesn't work for me.

    There doesn't seem to be any controls with a built-in ability to resize.  I found a think called a Gridsplitter that sounds like it would work for me but I can't make it function with vs2019. 


    Saturday, September 7, 2019 7:50 PM
  • Found this, Windows Toolkit fails to build.  So, it looks like there are no re-sizable controls available for UWP right now.
    Saturday, September 7, 2019 7:56 PM
  • Hi Suresh,

    for my needs I implemented the following. It works well with mouse und touch, also in older Windows 10 builds.

    I made a separate file for the partial MainPage class and registered the Pointer event handlers. The divider is wider than you can see because it's better to catch it.

    MainPage.xaml

    <Grid Name="gridMain">
    	<Grid.ColumnDefinitions>
    		<ColumnDefinition />
    		<ColumnDefinition Width="Auto" />
    	</Grid.ColumnDefinitions>
    
    	<Grid Name="gridLeftContent" Grid.Column="0" Margin="10">
    		
    		<!--Left content-->
    		<TextBox Text="Left" AcceptsReturn="True" TextWrapping="Wrap"
    				 ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" />
    		
    	</Grid>
    	
    	<Grid Name="gridRight" Grid.Column="1">
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="Auto" />
    			<ColumnDefinition />
    		</Grid.ColumnDefinitions>
    
    		<!--Vertical divider-->
    		<Rectangle Name="rectVerticalDivider" Width="8" VerticalAlignment="Stretch" Grid.Column="0" Margin="0 10"
    				   PointerEntered="rectVerticalDivider_PointerEntered" PointerCanceled="rectVerticalDivider_PointerCanceled"
    				   PointerCaptureLost="rectVerticalDivider_PointerCaptureLost" PointerExited="rectVerticalDivider_PointerExited"
    				   PointerPressed="rectVerticalDivider_PointerPressed" PointerMoved="rectVerticalDivider_PointerMoved"
    				   PointerReleased="rectVerticalDivider_PointerReleased">
    			<Rectangle.Fill>
    				<LinearGradientBrush StartPoint="0 0" EndPoint="1 0">
    					<GradientStop Offset="0.00" Color="Transparent" />
    					<GradientStop Offset="0.40" Color="Transparent" />
    					<GradientStop Offset="0.45" Color="Blue" />
    					<GradientStop Offset="0.65" Color="Blue" />
    					<GradientStop Offset="0.70" Color="Transparent" />
    					<GradientStop Offset="1.00" Color="Transparent" />
    				</LinearGradientBrush>
    			</Rectangle.Fill>
    		</Rectangle>
    
    		<Grid Name="gridRightConent" Grid.Column="1" Margin="10">
    
    			<!--Right content-->
    			<TextBox Text="Right" AcceptsReturn="True" TextWrapping="Wrap"
    					 ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" />
    		</Grid>
    	</Grid>
    </Grid>


    MainPage.xaml.cs

    public sealed partial class MainPage : Page
    {
    	public MainPage()
    	{
    		InitializeComponent();
    		Dividers_Initialize();
    	}
    
    	private void Page_Loaded(object sender, RoutedEventArgs e)
    	{
    		ArrowCursor = Window.Current.CoreWindow.PointerCursor;
    	}
    }


    MainPage_Divider.cs

    using System;
    using Windows.Storage;
    using Windows.UI.Core;
    using Windows.UI.Input;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Input;
    
    namespace DividerTest
    {
        public sealed partial class MainPage : Page
    	{
    		CoreCursor	ArrowCursor;
    		PointerPoint	StartPoint;
    		double		MinRightGridWidth = 120,
    				    LastRightGridWidth = 256;
    
    		private static double SavedRightWidth
    		{
    			get => (ApplicationData.Current.LocalSettings.Values["RightWidth"] as double?) ?? 256;
    			set => ApplicationData.Current.LocalSettings.Values["RightWidth"] = value;
    		}
    
    		private void Dividers_Initialize()
    		{
    			// Restore the initial width of right grid.
    			LastRightGridWidth = SavedRightWidth;
    			gridRight.Width = Math.Min(CoreWindow.GetForCurrentThread().Bounds.Width / 2, Math.Max(LastRightGridWidth, MinRightGridWidth));
    		}
    
    		private void rectVerticalDivider_PointerEntered(object sender, PointerRoutedEventArgs e)
    		{
    			Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.SizeWestEast, 2);
    
    			if (StartPoint == null && e.Pointer.PointerDeviceType != Windows.Devices.Input.PointerDeviceType.Mouse)
    			{
    				PointerPoint point = e.GetCurrentPoint(gridMain);
    
    				StartPoint = point;
    				rectVerticalDivider.CapturePointer(e.Pointer);
    				LastRightGridWidth = gridRight.ActualWidth;
    				e.Handled = true;
    			}
    		}
    
    		private void rectVerticalDivider_PointerCanceled(object sender, PointerRoutedEventArgs e)
    		{
    			RestoreCursor();
    		}
    
    		private void rectVerticalDivider_PointerCaptureLost(object sender, PointerRoutedEventArgs e)
    		{
    			RestoreCursor();
    		}
    
    		private void rectVerticalDivider_PointerExited(object sender, PointerRoutedEventArgs e)
    		{
    			if (StartPoint == null)
    				RestoreCursor();
    		}
    
    		private void rectVerticalDivider_PointerPressed(object sender, PointerRoutedEventArgs e)
    		{
    			StartPoint = e.GetCurrentPoint(gridMain);
    			rectVerticalDivider.CapturePointer(e.Pointer);
    			LastRightGridWidth = gridRight.ActualWidth;
    			e.Handled = true;
    		}
    
    		private void rectVerticalDivider_PointerMoved(object sender, PointerRoutedEventArgs e)
    		{
    			if (StartPoint == null)
    				return;
    
    			PointerPoint	point = e.GetCurrentPoint(gridMain);
    
    			if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse && !point.Properties.IsLeftButtonPressed)
    				return;
    
    			double	newWidth = LastRightGridWidth + (StartPoint.Position.X - point.Position.X);
    
    			if (newWidth < MinRightGridWidth)
    				return;
    
    			gridRight.Width = newWidth;
    			e.Handled = true;
    		}
    
    		private void rectVerticalDivider_PointerReleased(object sender, PointerRoutedEventArgs e)
    		{
    			rectVerticalDivider.ReleasePointerCapture(e.Pointer);
    		//	RestoreCursor();
    			LastRightGridWidth = gridRight.ActualWidth;
    			// Here you can store the current width of right grid.
    			SavedRightWidth = LastRightGridWidth;
    			e.Handled = true;
    		}
    
    		private void RestoreCursor()
    		{
    			if (ArrowCursor != null)
    				Window.Current.CoreWindow.PointerCursor = ArrowCursor;
    			StartPoint = null;
    		}
    	}
    }


    Best Regards,

    Heiko

    Sunday, September 8, 2019 11:54 AM
  • Tried but result is not as expected.
    Monday, September 9, 2019 4:50 PM
  • Hi Heiko,

    Thank you for sharing your work but my requirement is different than your requirement. I am looking for control which can be resized from the all the directions like Paint 3D select tool as shown below. I found one code snippet but thats resizes in only one side

    https://stackoverflow.com/questions/48397647/uwp-is-there-anyway-to-implement-control-for-resizing-and-move-textbox-in-canva/48401652

    Paint 3D select tool

    Best regards

    Suresh


    Monday, September 9, 2019 4:56 PM
  • Hi,

    It seems that you seem to have found a solution.

    You can refer to your example and extend it to customize this zoom control to your needs.

    Best regards.


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, September 10, 2019 3:09 AM
  • No. I am unable to set the coordinates for the control to right ie., CenterPoint to right so that Translate, Scale and rotate will apply.

    It always aligns left even if CenterPoint set to (x+UIElement.ActualWidth, y).

    I am trying to solve using https://docs.microsoft.com/en-us/uwp/api/windows.ui.composition.visual.anchorpoint but no luck.


    Tuesday, September 10, 2019 8:22 AM
  • Hi,

    We need specific questions you encounter during the development process. Please forgive us for not being able to customize the controls according to your requirements.

    You can try to make your own controls. When you encounter problems, please open a new thread, post your code and describe your problem in detail so that we can help you solve it.

    Best regards.


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, September 11, 2019 2:52 AM