Xaml simple storyboard/animation - xaml

I have a Xaml-view containing three buttons and three usercontrols.
I in the code-behind i have buttons that toggles visibility on or off:
<Grid HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Summer" Click="ButtonBase_OnClick" HorizontalAlignment="Left"/>
<Button Content="Winter" Click="ButtonBase_OnClick3" HorizontalAlignment="Center"/>
<Button Content="Autumn" Click="ButtonBase_OnClick1" HorizontalAlignment="Right"/>
</StackPanel>
<Grid VerticalAlignment="top" HorizontalAlignment="Center" Margin="0,50,0,0">
<StackPanel Width="600" VerticalAlignment="top" Background="LightGreen">
<local:Summer x:Name="Summer" Width="600"></local:Summer>
<local:Winter x:Name="Winter" Visibility="Collapsed" Width="600"></local:Winter>
<local:Autumn x:Name="Autumn" Visibility="Collapsed" Width="600"></local:Autumn>
</StackPanel>
</Grid>
</Grid>
Code behind:
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
Autumn.Visibility = Visibility.Collapsed;
Summer.Visibility = Visibility.Collapsed;
Winter.Visibility = Visibility.Visible;
}
private void ButtonBase_OnClick1(object sender, RoutedEventArgs e)
{
Autumn.Visibility = Visibility.Collapsed;
Summer.Visibility = Visibility.Visible;
Winter.Visibility = Visibility.Collapsed;
}
private void ButtonBase_OnClick3(object sender, RoutedEventArgs e)
{
Autumn.Visibility = Visibility.Visible;
Summer.Visibility = Visibility.Collapsed;
Winter.Visibility = Visibility.Collapsed;
}
I would like to know how to accomplish a simple animation (slide in) by using storyboards or other way. I´ve seen examples online but I have had a hard time making them work in my specifik case.

Related

Dynamically add and remove controls, using uwp windows 10 visual studio 2015

Edit:23-10;15:37h
Lets make one very big story very small. I've found out a lot!
first impressing of possibible layout
I want a program, were I can place/replace/rotate/adjust/remove fences in a field.
At this point I drag the fences from the listview into the canvas. But now I have a problem. I can't give those a name. I can't find a way to interact.
And seeing that I have come this far. Perhaps it's best to consider a save/load option. I expect some sort of csv of xml file could be used.
xaml.cs
byte Selectie = 0;
private void parcours_Drop(object sender, DragEventArgs e)
{
var pointer = e.GetPosition(parcours);
//following lines are used to create an object.
if (Selectie !=0)
{
Image enkel = new Image();
enkel.Width = 70;
enkel.Height = 70;
if (Selectie == 1)
{
enkel.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/hindernissen_01.png"));
}
if (Selectie == 2)
{
enkel.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/hindernissen_02.png"));
}
if (Selectie == 3)
{
enkel.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/hindernissen_03.png"));
}
enkel.CanDrag = true;
parcours.Children.Add(enkel);
Canvas.SetTop(enkel, pointer.Y - 35);
Canvas.SetLeft(enkel, pointer.X - 35);
}
if (Selectie == 0)
{
Canvas.SetTop(enkel, pointer.Y - 35);
Canvas.SetLeft(enkel, pointer.X - 35);
}
Selectie = 0;
}
private void parcours_DragOver(object sender, DragEventArgs e)
{
e.AcceptedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Move;//you must accept accept a drop. prevents it from dropping anywere.
}
private void tripple_DragStarting(UIElement sender, DragStartingEventArgs args)
{
Selectie = 3;
}
private void dubbel_DragStarting(UIElement sender, DragStartingEventArgs args)
{
Selectie = 2;
}
private void enkel_DragStarting(UIElement sender, DragStartingEventArgs args)
{
Selectie = 1;
}
mainpage
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="Header1"
HorizontalAlignment="Left"
Height="59" Margin="118,0,0,0"
TextWrapping="Wrap" Text="Parcourshulp"
VerticalAlignment="Top" Width="840"
Foreground="Black" FontSize="48"
Grid.ColumnSpan="2"
/>
<Rectangle Fill="Red"
Height="18"
Margin="1,64,0,0"
Stroke="Black"
VerticalAlignment="Top"
Grid.ColumnSpan="2"
/>
<Canvas x:Name="parcours" HorizontalAlignment="Left"
Height="306"
Margin="33,176,0,0"
VerticalAlignment="Top"
Width="745"
Background="#FFECE2E2"
AllowDrop="True"
Grid.ColumnSpan="2" Drop="parcours_Drop" DragOver="parcours_DragOver">
<Image x:Name="enkel_Copy2" HorizontalAlignment="Left" Height="70" VerticalAlignment="Top" Width="70" RenderTransformOrigin="0.09,-0.015" Source="Assets/hindernissen_01.png" CanDrag="True" Canvas.Left="456" Canvas.Top="195" />
</Canvas>
<ListView x:Name="listView" Background="#FFECE2E2" Height="306" Margin="827,176,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="107" RenderTransformOrigin="0.518,0.532">
<Image x:Name="enkel" HorizontalAlignment="Left" Height="70" VerticalAlignment="Top" Width="70" RenderTransformOrigin="0.09,-0.015" Source="Assets/hindernissen_01.png" CanDrag="True" DragStarting="enkel_DragStarting">
</Image>
<Image x:Name="dubbel" HorizontalAlignment="Left" Height="70" VerticalAlignment="Top" Width="70" RenderTransformOrigin="0.09,-0.015" Source="Assets/hindernissen_02.png" CanDrag="True" DragStarting="dubbel_DragStarting"/>
<Image x:Name="tripple" HorizontalAlignment="Left" Height="70" VerticalAlignment="Top" Width="70" RenderTransformOrigin="0.09,-0.015" Source="Assets/hindernissen_03.png" CanDrag="True" DragStarting="tripple_DragStarting"/>
</ListView>
</Grid>
</Page>

how to set value in text box on button click on other page in uwp?

In My page right side have some text box (page 1) and in left side some button like 1,2,3(page 2) on text box got focus page 2 come out in frame.
now My problem is that how to set value in text box which is in page 1 on button click which is on page 2 in uwp.
You can use FrameworkElement.FindName method to get the TextBox in your page 1 from your page 2.
For example here:
MainPage has two Frame:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Frame x:Name="frame1"></Frame>
<Frame x:Name="frame2" Grid.Column="1"></Frame>
</Grid>
code behind:
public MainPage()
{
this.InitializeComponent();
this.frame1.Navigate(typeof(MenuPage));
this.frame2.Navigate(typeof(Page1));
}
MenuPage is a blank page here in my test.
Page 1:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Tapped="Grid_Tapped">
<TextBlock Name="textBlock" Text="This is Page 1" VerticalAlignment="Top" FontSize="25" />
<Button VerticalAlignment="Top" Width="1"></Button>
<StackPanel VerticalAlignment="Center">
<TextBox Name="tb1" GotFocus="tb_GotFocus" />
<TextBox Name="tb2" Margin="0,30" GotFocus="tb_GotFocus" />
<TextBox Name="tb3" GotFocus="tb_GotFocus" />
</StackPanel>
</Grid>
code behind:
public Page1()
{
this.InitializeComponent();
this.Loaded += Page1_Loaded;
}
private Frame frame;
private void Page1_Loaded(object sender, RoutedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
Page mainPage = rootFrame.Content as MainPage;
frame = mainPage.FindName("frame1") as Frame;
}
private void tb_GotFocus(object sender, RoutedEventArgs e)
{
frame.Navigate(typeof(Page2));
}
private void Grid_Tapped(object sender, TappedRoutedEventArgs e)
{
if (frame.CanGoBack)
frame.GoBack();
}
Page 2:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Text="This is Page 2" VerticalAlignment="Top" FontSize="25" />
<StackPanel VerticalAlignment="Center">
<Button Content="Button 1" Click="Button_Click_1" />
<Button Content="Button 2" Click="Button_Click_2" Margin="0,30" />
<Button Content="Button 3" Click="Button_Click_3" />
</StackPanel>
</Grid>
code behind:
public Page2()
{
this.InitializeComponent();
this.Loaded += Page2_Loaded;
}
private TextBox tb1;
private TextBox tb2;
private TextBox tb3;
private void Page2_Loaded(object sender, RoutedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
Page mainPage = rootFrame.Content as MainPage;
Frame frame = mainPage.FindName("frame2") as Frame;
Page page1 = frame.Content as Page1;
tb1 = page1.FindName("tb1") as TextBox;
tb2 = page1.FindName("tb2") as TextBox;
tb3 = page1.FindName("tb3") as TextBox;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
tb1.Text = "Button 1 Clicked!";
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
tb2.Text = "Button 2 Clicked!";
}
private void Button_Click_3(object sender, RoutedEventArgs e)
{
tb3.Text = "Button 3 Clicked!";
}
Rendering Image:
Update:
MainPage calls Page 1:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Navigate to Page 1" Click="Button_Click" />
</Grid>
code behind:
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(Page1));
}
Page 1 has a Frame and calls Page 2:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Frame Name="myframe"></Frame>
<Grid Grid.Column="1">
<TextBlock Name="textBlock" Text="This is Page 1" VerticalAlignment="Top" FontSize="25" />
<Button VerticalAlignment="Top" Width="1"></Button>
<StackPanel VerticalAlignment="Center">
<TextBox Name="tb1" GotFocus="tb_GotFocus" />
<TextBox Name="tb2" Margin="0,30" GotFocus="tb_GotFocus" />
<TextBox Name="tb3" GotFocus="tb_GotFocus" />
</StackPanel>
</Grid>
</Grid>
code behind:
private void tb_GotFocus(object sender, RoutedEventArgs e)
{
myframe.Navigate(typeof(Page2));
}
Page 2:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Text="This is Page 2" VerticalAlignment="Top" FontSize="25" />
<StackPanel VerticalAlignment="Center">
<Button Content="Button 1" Click="Button_Click_1" />
<Button Content="Button 2" Click="Button_Click_2" Margin="0,30" />
<Button Content="Button 3" Click="Button_Click_3" />
</StackPanel>
</Grid>
code behind is a little different:
public Page2()
{
this.InitializeComponent();
this.Loaded += Page2_Loaded;
}
private TextBox tb1;
private TextBox tb2;
private TextBox tb3;
private void Page2_Loaded(object sender, RoutedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
Page page1 = rootFrame.Content as Page1;
tb1 = page1.FindName("tb1") as TextBox;
tb2 = page1.FindName("tb2") as TextBox;
tb3 = page1.FindName("tb3") as TextBox;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
tb1.Text = "Button 1 Clicked!";
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
tb2.Text = "Button 2 Clicked!";
}
private void Button_Click_3(object sender, RoutedEventArgs e)
{
tb3.Text = "Button 3 Clicked!";
}
Here is the solution I found. It was a combination of part of above. The ShellPage was a frame page. It had a textblock and this code was in the app.xaml.cs page.
ShellPage currentPage = Window.Current.Content as ShellPage;
TextBlock tb1 = currentPage.FindName("InternetConnection") as TextBlock;
tb1.Text = InternetConnectionText;
tb1.Foreground = InternetConnectionForeground;

How to hide top part of hamburger menu in the XAML Navigation Sample?

In the Windows UWP XAML Navigation sample from git hub, how can you hide the very top part of the hamburger menu flyout that obscures the section title?
Currently it renders like this so there is a strip that hides the section title of the page.
How can I get it to look like this? So the Section title is not obscured when I open the menu.
I tried playing with the z-index of the page header, but it had no effect. The hamburger menu always renders over top everything else.
Just check the Microsoft weather app for windows 10, I think it's more like there is a region out of the SplitView control, which is to hold like "hamburger button", "back button", "commandbar", and "AutoSuggestBox".
Here I wrote a sample:
<Page.Resources>
<local:BoolToVisiableConverter x:Key="visiblecvt" />
<local:BackgroundConverter x:Key="backgroundcvt" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="15*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="{Binding ElementName=listmenu, Path=SelectedItem.MenuText, Converter={StaticResource backgroundcvt}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Button BorderThickness="0" Background="LightBlue" Click="Button_Click_Pane" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Button.Content>
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="24" />
</Button.Content>
</Button>
<Button BorderThickness="0" Background="Transparent" Click="Button_Click_Back" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Button.Content>
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="24" />
</Button.Content>
</Button>
<TextBlock FontSize="24" Grid.Column="2" x:Name="title" VerticalAlignment="Center" Text="{Binding ElementName=listmenu, Path=SelectedItem.MenuText}" />
<CommandBar Grid.Column="3" Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Visibility="{Binding ElementName=title, Path=Text, Converter={StaticResource visiblecvt}}">
<CommandBar.Content>
<Grid />
</CommandBar.Content>
<AppBarButton Icon="Accept" FontSize="24" Label="Accept" />
<AppBarButton Icon="Cancel" FontSize="24" Label="Cancel" />
</CommandBar>
<AutoSuggestBox Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Stretch" IsSuggestionListOpen="True" />
</Grid>
<SplitView Grid.Row="1" x:Name="RootSpiltView" OpenPaneLength="300" CompactPaneLength="50" DisplayMode="CompactOverlay">
<SplitView.Pane>
<ListView x:Name="listmenu" ItemsSource="{x:Bind menu}" SelectionChanged="ListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding MenuIcon}" FontFamily="Segoe MDL2 Assets" FontSize="24" VerticalAlignment="Center" />
<TextBlock Text="{Binding MenuText}" Margin="15" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SplitView.Pane>
<SplitView.Content>
<Frame x:Name="splitviewContent" Navigated="splitviewContent_Navigated" />
</SplitView.Content>
</SplitView>
</Grid>
code behind:
private ObservableCollection<NavigationItem> menu = new ObservableCollection<NavigationItem>();
public MainPage()
{
this.InitializeComponent();
this.Loaded += MainPage_Loaded;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
menu.Clear();
menu.Add(new NavigationItem { PageLink = typeof(Page1), MenuText = typeof(Page1).Name, MenuIcon = "\xE715" });
menu.Add(new NavigationItem { PageLink = typeof(Page2), MenuText = typeof(Page2).Name, MenuIcon = "\xE716" });
menu.Add(new NavigationItem { PageLink = typeof(Page3), MenuText = typeof(Page3).Name, MenuIcon = "\xE722" });
menu.Add(new NavigationItem { PageLink = typeof(Page4), MenuText = typeof(Page4).Name, MenuIcon = "\xE72D" });
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
listmenu.SelectedIndex = 0;
}
private void Button_Click_Pane(object sender, RoutedEventArgs e)
{
this.RootSpiltView.IsPaneOpen = !this.RootSpiltView.IsPaneOpen;
}
private void Button_Click_Back(object sender, RoutedEventArgs e)
{
if (splitviewContent.CanGoBack)
{
splitviewContent.GoBack();
}
}
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var naviitem = listmenu.SelectedItem as NavigationItem;
splitviewContent.Navigate(naviitem.PageLink);
}
private void splitviewContent_Navigated(object sender, NavigationEventArgs e)
{
var page = splitviewContent.CurrentSourcePageType.Name;
switch (page)
{
case "Page1":
listmenu.SelectedIndex = 0;
break;
case "Page2":
listmenu.SelectedIndex = 1;
break;
case "Page3":
listmenu.SelectedIndex = 2;
break;
case "Page4":
listmenu.SelectedIndex = 3;
break;
}
}
The NavigationItem class and two converters:
public class NavigationItem
{
public string MenuIcon { get; set; }
public string MenuText { get; set; }
public Type PageLink { get; set; }
}
public class BoolToVisiableConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var text = (string)value;
if (text == "Page1")
{
return Visibility.Visible;
}
return Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
public class BackgroundConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var text = (string)value;
if (text == "Page1")
{
return "#FFFFC0CB";
}
return "#00000000";
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
I didn't follow to the official XAML Navigation sample to wrote this code, here my sample renders like this:
#Henk Holterman's comment also makes sense. In the official sample, the title is part of the page content. For different page, the title may have different size. But in Weather app, the title is separated from the content, so it will be easy to achieve.

Placing PopUp, which is inside a Itemscontrol

I've got an itemscontrol, in which all my elements are PopUps. The problem is I do not know how to place them compared to the grid in which the itemscontrol is placed. I've tried using horizontal- and vertical alignment but this does not help. The xaml code I've got so far is:
<Grid>
<ItemsControl Grid.Row="1" VerticalContentAlignment="Top" HorizontalAlignment="Left" ItemsSource="{Binding PopUp}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ViewModel:PopUpTemplateSelector.EndTurnMenuTemplate>
<DataTemplate>
<Popup IsOpen="{Binding PU.IsOpen}" HorizontalAlignment="Left" VerticalAlignment="Top">
<Design:InGame_NextTurn_UserControl/>
</Popup>
</DataTemplate>
</ViewModel:PopUpTemplateSelector.EndTurnMenuTemplate>
</ViewModel:PopUpTemplateSelector>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
I would suggest maybe using the following overlay method instead.
From this Nokia page:
Overlay XMAL:
<UserControl x:Class="WindowsPhoneSample7.OverLay"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
d:DesignHeight="800" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="400"/>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1">
<ProgressBar IsIndeterminate="True" Foreground="Orange" Height="50" Width="480" VerticalAlignment="Center"/>
<TextBlock Text="Wait" Foreground="Orange" HorizontalAlignment="Center"/>
</StackPanel>
</Grid>
</UserControl>
Overlay code-behind:
public OverLay()
{
InitializeComponent();
this.LayoutRoot.Height = Application.Current.Host.Content.ActualHeight;
this.LayoutRoot.Width = Application.Current.Host.Content.ActualWidth;
SystemTray.IsVisible = false; //to hide system tray
}
MainPage code-behind:
public partial class MainPage : PhoneApplicationPage
{
private Popup popup;
// Constructor
public MainPage()
{
InitializeComponent();
this.popup = new Popup();
}
private void BtnStart_Click(object sender, RoutedEventArgs e)
{
this.LayoutRoot.Opacity = 0.2;
OverLay ovr = new OverLay();
this.popup.Child = ovr;
this.popup.IsOpen = true;
BackgroundWorker worker = new BackgroundWorker();
worker.DoWork += (s, a) =>
{
Thread.Sleep(5000);
};
worker.RunWorkerCompleted += (s, a) =>
{
popup.IsOpen = false;
this.LayoutRoot.Opacity = 1.0;
};
worker.RunWorkerAsync();
}
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
this.popup.IsOpen = false;
}
}

Resizing a control in Windows store app

Was just wondering how I would go about letting the user resize a TextBox control at runtime by dragging its corners in Windows Store App. Less importantly, is the same technique used for the resizing of all controls?
Thank and regards!
Here I am giving you only for textbox as for others it's same.
XAML Code
<Page>
<Canvas Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="grdTextbox" Canvas.Left="300" Canvas.Top="300" Height="40" Width="200">
<Thumb x:Name="ThumbBottomRight" Background="White" Height="10" Width="10" HorizontalAlignment="Right" DragDelta="ThumbBottomRight_DragDelta" VerticalAlignment="Bottom"/>
<Thumb x:Name="ThumbBottomLeft" Background="White" Height="10" Width="10" HorizontalAlignment="Left" DragDelta="ThumbBottomLeft_DragDelta" VerticalAlignment="Bottom"/>
<Thumb x:Name="ThumbTopRight" Background="White" Height="10" Width="10" HorizontalAlignment="Right" DragDelta="ThumbTopRight_DragDelta" VerticalAlignment="Top"/>
<Thumb x:Name="ThumbTopLeft" Background="White" Height="10" Width="10" HorizontalAlignment="Left" DragDelta="ThumbTopLeft_DragDelta" VerticalAlignment="Top"/>
<TextBox Margin="5" Text="This is resizable textbox"/>
</Grid>
</Canvas>
</Page>
C# Code
private void ThumbTopLeft_DragDelta(object sender, DragDeltaEventArgs e)
{
grdTextbox.Width -= e.HorizontalChange;
grdTextbox.Height -= e.VerticalChange;
Canvas.SetLeft(grdTextbox, Canvas.GetLeft(grdTextbox) + e.HorizontalChange);
Canvas.SetTop(grdTextbox, Canvas.GetTop(grdTextbox) + e.VerticalChange);
}
private void ThumbTopRight_DragDelta(object sender, DragDeltaEventArgs e)
{
grdTextbox.Width += e.HorizontalChange;
grdTextbox.Height -= e.VerticalChange;
Canvas.SetTop(grdTextbox, Canvas.GetTop(grdTextbox) + e.VerticalChange);
}
private void ThumbBottomLeft_DragDelta(object sender, DragDeltaEventArgs e)
{
grdTextbox.Width -= e.HorizontalChange;
grdTextbox.Height += e.VerticalChange;
Canvas.SetLeft(grdTextbox, Canvas.GetLeft(grdTextbox) + e.HorizontalChange);
}
private void ThumbBottomRight_DragDelta(object sender, DragDeltaEventArgs e)
{
grdTextbox.Width += e.HorizontalChange;
grdTextbox.Height += e.VerticalChange;
}