I'm trying to change some attached properties using the VisualStateManager in a Windows 10 Universal App project but the setters aren't working. It's not setting the attached properties of my TopBarGrid element.
If you look below I'm using the parentheses notation in order to change the Grid.Row and Grid.ColumnSpan properties. But when I run the app, the properties are not being set when I enlargen the width. I'm expecting the Grid to move to that position.
Here is my code:
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="wideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="641" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="splitView.DisplayMode" Value="Inline"/>
<Setter Target="splitView.IsPaneOpen" Value="True"/>
<Setter Target="togglePaneButton.Visibility" Value="Collapsed"/>
<Setter Target="appHeader.Margin" Value="0,0,0,0"/>
<Setter Target="PaneHeader.Margin" Value="6,12,0,0"/>
<Setter Target="TopBarGrid.(Grid.Column)" Value="0"/>
<Setter Target="TopBarGrid.(Grid.RowSpan)" Value="2"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="narrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="splitView.DisplayMode" Value="Overlay"/>
<Setter Target="togglePaneButton.Visibility" Value="Visible"/>
<Setter Target="PaneHeader.Margin" Value="60,12,0,0"/>
<Setter Target="searchForInfoBox.Width" Value="270"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition x:Name="TopRowHeight" Height="80"/>
<RowDefinition Height="*"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="TopBarGrid" Grid.Row="0" Grid.ColumnSpan="2">
<toolbars:TopHorizontalToolBar/>
</Grid>
<Grid x:Name="LeftBarGrid" Grid.Column="0" Grid.RowSpan="2" Visibility="Collapsed">
<toolbars:VerticalToolBar />
</Grid>
Your code looks fine, however, in both states, you are setting the Row and ColumnSpan of the TopBarGrid to the same values. That's why you won't see any changes.
Try removing one set from one state.
The reason you still don't see any changes is most likely because there's something wrong with your Setters in your narrowState.
Try the following code, note that the TopBarGrid behaves correctly.
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="wideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="641" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TopBarGrid.(Grid.Column)" Value="0" />
<Setter Target="TopBarGrid.(Grid.RowSpan)" Value="2" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="narrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TopBarGrid.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="TopRowHeight" Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="TopBarGrid" Grid.Row="0" Grid.ColumnSpan="2" Background="Red" />
<Grid x:Name="LeftBarGrid" Grid.Column="0" Grid.RowSpan="2" Visibility="Collapsed" />
</Grid>
</Grid>
But as soon as I throw in more Setters (e.g. <Setter Target="PaneHeader.Margin" Value="60,12,0,0" />) to the narrowState, it stops working. I know, PaneHeader wasn't even defined in my test page! But it also tells me that the VSM simply swallows the error for some reason.
So, try removing your Setters and adding them back one to one to locate the bugged one. Then it would be a simple fix.
#Ray As for TopBarGrid.(Grid.Column) you have to provide PaneHeader.(FrameworkElement.Margin)
Related
I have two UWP app configurations: Vertical and Horizontal and I dont want to duplicate functional in XAML.
HoriazntalView.xaml:
<Grid>
<!-- some common logic for two pages -->
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<Grid.ColumnDefinitions/>
<CaptureElement x:Name="First" Grid.Column="0" />
<CaptureElement x:Name="Second" Grid.Column="1" />
<!-- some common logic for two pages -->
<Grid/>
VerticalView.xaml:
<Grid>
<!-- some common logic for two pages -->
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<Grid.RowDefinitions/>
<CaptureElement x:Name="First" Grid.Row="0" />
<CaptureElement x:Name="Second" Grid.Row="1" />
<!-- some common logic for two pages -->
<Grid/>
Can I get something like:
View.xaml
<Grid>
<!-- some common logic for two pages -->
<!-- adaptive part -->
<!-- some common logic for two pages -->
<Grid/>
I tried following ways for adaptive part:
Use VisualStateManager with StackPanel
<StackPanel x:Name="PreviewsStack"
Orientation="Vertical">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="HorizontalView">
<VisualState.Setters>
<Setter Target="PreviewsStack.Orientation" Value="Horizontal"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VerticalView">
<VisualState.Setters>
<Setter Target="PreviewsStack.Orientation" Value="Vertical"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<CaptureElement x:Name="First" />
<CaptureElement x:Name="Second"/>
</StackPanel>
Use VisualStateManager with Grid
<Grid x:Name="PreviewsGrid"
Grid.Column="1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="VerticalView">
<VisualState.Setters>
<Setter Target="FirstPreviewGrid.Grid.Row" Value="0"/>
<Setter Target="FirstPreviewGrid.Grid.ColumnSpan" Value="2"/>
<Setter Target="SecondPreviewGrid.Grid.Row" Value="1"/>
<Setter Target="SecondPreviewGrid.Grid.ColumnSpan" Value="2"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="HorizontalView">
<VisualState.Setters>
<Setter Target="FirstPreviewGrid.Grid.Column" Value="0"/>
<Setter Target="FirstPreviewGrid.Grid.RowSpan" Value="2"/>
<Setter Target="SecondPreviewGrid.Grid.Column" Value="1"/>
<Setter Target="SecondPreviewGrid.Grid.RowSpan" Value="2"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid x:Name="FirstPreviewGrid">
<CaptureElement x:Name="FirstPreview"/>
</Grid>
<Grid x:Name="SecondPreviewGrid">
<CaptureElement x:Name="SecondPreview"/>
</Grid>
</Grid>
Both attempts will be used in code-behind like:
var state = /* condition */
? nameof(VerticalView)
: nameof(HorizontalView);
VisualStateManager.GoToState(this, state, false);
But none of the attempts work.
Can I manage that?
I'm working on a UWP app. I'm already using adaptive triggers to adapt my xaml depending on the width of the window, and it works.. only in a Page.
Now I want to do the same for the xaml of a User Control, and it's not working .. Yet I put the VisualStateManager to root grid of the user control.
Is there a difference ?
Here's the code of my user control :
<UserControl
x:Class=.....>
<UserControl.Resources>
<ResourceDictionary>
<vm:ViewModelLocator x:Key="Locator"/>
<converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Path="MyUserControlVM" Source="{StaticResource Locator}"/>
</UserControl.DataContext>
<Grid x:Name="LayoutRoot" Background="white">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LastName.Foreground" Value="Red" />
<Setter Target="LastName.Fontsize" Value="10" />
<Setter Target="FirstName.Foreground" Value="Red"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LastName.Foreground" Value="Red" />
<Setter Target="LastName.Fontsize" Value="25" />
<Setter Target="FirstName.Foreground" Value="Red"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1000"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LastName.Foreground" Value="Red" />
<Setter Target="FirstName.Foreground" Value="Red"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Listbox>
...
</ListBox>
<TextBlock x:Name="lblNoData" Grid.ColumnSpan="2" Text="No Data" Visibility="{Binding NoDataVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<ProgressRing x:Name="prLoading" Width="60" Height="60" Foreground="Blue" IsActive="{Binding InitializationNotifier.IsNotCompleted}" />
</Grid>
("LastName" and "FirstName" are textblocks in the DataTemplate of my listbox. I'm just trying to put my text in red in order to see when the triggers work)
And I call the user control in a simple page like this :
<Grid x:Name="LayoutRoot" Background="{StaticResource white}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,0,0,10">
...
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0">
<UC:MyUserControl/>
</Grid>
</Grid>
I don't understand why this code won't work. Thank you in advance for your help !
("LastName" and "FirstName" are textblocks in the DataTemplate of my listbox. I'm just trying to put my text in red in order to see when the triggers work)
You can refer to my another answer here, as I said in that answer, when the controls are placed in the DataTemplate, they becomes the visual structure of your data objects. I think there is no clean way to do this work only in the xaml code, Data Binding here is your friend.
From your code I can see that you want to change the Foreground (but all to Red?) and the FontSize of the TextBlocks inside of the DataTemplate depending on the window's size. So you can bind these two proprieties to the window's size, or you can use ItemsControl.ItemTemplateSelector to select different template when the window's size is changed.
I'm trying to resize an image and a FontSize of a textblock based on the window width. My code is as shown below:
<DataTemplate x:Name="TestItemTemplate" x:DataType="data:TestItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Default" >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="340" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ChannelImage.Height" Value="80" />
<Setter Target="ChannelImage.Width" Value="80" />
<Setter Target="CategoryTitle.FontSize" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Margin="5,5,5,5">
<Image x:Name="ChannelImage" Source="{Binding assetName}" HorizontalAlignment="Center"/>
<TextBlock Foreground="Black" FontSize="14" RelativePanel.Below="ChannelImage" RelativePanel.AlignHorizontalCenterWith="ChannelImage"
Typography.Capitals="AllSmallCaps" x:Name="CategoryTitle" Text="{Binding itemName}" HorizontalAlignment="Center"/>
</RelativePanel>
</Grid>
</DataTemplate>
Here's the problems I'm having.
I've tried using different phone emulators with resolutions whose width is more than 340 but the resolution of ChannelImage simple doesn't scale to 80x80 epx.
I've also tried running the desktop version of the program. The image doesn't scale to 80x80 BUT as soon as I start resizing the window it gets way bigger than 80x80 and continues to grow as the window is widened further.
I would really appreciate if someone could point out what I'm doing wrong.
You need to wrap your datatemplate in UserControl like this:
<DataTemplate x:Name="TestItemTemplate" x:DataType="data:TestItem">
<UserControl>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Default" >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="340" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ChannelImage.Height" Value="80" />
<Setter Target="ChannelImage.Width" Value="80" />
<Setter Target="CategoryTitle.FontSize" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Margin="5,5,5,5">
<Image x:Name="ChannelImage" Source="{Binding assetName}" HorizontalAlignment="Center"/>
<TextBlock Foreground="Black" FontSize="14" RelativePanel.Below="ChannelImage" RelativePanel.AlignHorizontalCenterWith="ChannelImage"
Typography.Capitals="AllSmallCaps" x:Name="CategoryTitle" Text="{Binding itemName}" HorizontalAlignment="Center"/>
</RelativePanel>
</Grid>
</UserControl>
</DataTemplate>
I use an Adaptive trigger to fit the content of my UWP Application to the window size. If the window witdh is smaller than 1000px, all of the three rectangles will be stacked. If not, the first two rectangles will be side by side and the third one will fill the whole window width beneath the two first rectangles.
<Page
x:Class="App4.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
<Grid Margin="10,0,10,0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1000" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Rect2.(Grid.Row)" Value="0" />
<Setter Target="Rect2.(Grid.Column)" Value="1" />
<Setter Target="Rect2.(Grid.ColumnSpan)" Value="1"/>
<Setter Target="Rect1.(Grid.ColumnSpan)" Value="1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Name="Rect1" Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0" Margin="10" Height="170" Fill="Red"/>
<Rectangle Name="Rect2" Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0" Margin="10" Height="170" Fill="Green"/>
<Rectangle Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="0" Height="400" Margin="10" Fill="Yellow"/>
</Grid>
</ScrollViewer>
But the Adaptive trigger only works if I remove the ScrollViewer around the Grid. The HorizontalScrollMode of the ScrollViewer is already disabled but it still doesn't work: All rectangles are stacked and changing the window width has no effect.
Is there a way to get this working with the ScrollViewer?
You have to set the setters in the first control of the XAML, if you change the first the Grid to the ScrollViewer, you have to set the setters before the Grid:
<ScrollViewer...>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1000" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Rect2.(Grid.Row)" Value="0" />
<Setter Target="Rect2.(Grid.Column)" Value="1" />
<Setter Target="Rect2.(Grid.ColumnSpan)" Value="1"/>
<Setter Target="Rect1.(Grid.ColumnSpan)" Value="1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>...</Grid>
</ScrollViewer>
hello I want that when the vision is less than 720 such as a phone, I would like the grid 2 went below the grid 1. I tried through its panel and adaptive trigger like this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<RelativePanel >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="NarrowView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.Below)" Value="Grid1"/>
<Setter Target="Grid1.(RelativePanel.Above)" Value="Grid2"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.RightOf)" Value="Grid1"/>
<Setter Target="Grid1.(RelativePanel.LeftOf)" Value="Grid2"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="Grid1" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" FontSize="20" PlaceholderText="NOME" Style="{StaticResource ResourceKey=TextBoxStyle}"/>
</Grid>
<Grid Grid.Column="1" x:Name="Grid2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="17" Text="Note" Foreground="#222222" Margin="20,15" ></TextBlock>
<TextBox Grid.Row="2" MaxLength="0" FontSize="17" Height="500" PlaceholderText="AGGIUNGI NOTA" Style="{StaticResource ResourceKey=TextBoxStyle}"></TextBox>
</Grid>
</Grid>
</RelativePanel>
</Grid>
But it does not work.
Thank you
There are two things you need to fix:
1) To make VisualState works, place the VisualStateManager under the first child of root Grid:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
......
</VisualStateManager.VisualStateGroups>
......
</Grid>
2) You don't need to add Columns, just place your two Grids under RelativePanel:
<RelativePanel>
<Grid x:Name="Grid1">
......
</Grid>
<Grid x:Name="Grid2">
......
</Grid>
</RelativePanel>
The completed xaml code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="NarrowView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.Below)" Value="Grid1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.RightOf)" Value="Grid1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel>
<Grid x:Name="Grid1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" FontSize="20" PlaceholderText="NOME" />
</Grid>
<Grid x:Name="Grid2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="17" Text="Note" Foreground="#222222" Margin="20,15" ></TextBlock>
<TextBox Grid.Row="2" MaxLength="0" FontSize="17" Height="500" PlaceholderText="AGGIUNGI NOTA" ></TextBox>
</Grid>
</RelativePanel>
</Grid>
i found a solution without relativePanel, if anyone care:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="NarrowView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="text.(Grid.ColumnSpan)" Value="2" />
<Setter Target="text1.(Grid.ColumnSpan)" Value="2" />
<Setter Target="text2.(Grid.ColumnSpan)" Value="2" />
<Setter Target="text1.(Grid.Row)" Value="1" />
<Setter Target="text1.(Grid.Column)" Value="0" />
<Setter Target="text2.(Grid.Row)" Value="2" />
<Setter Target="text2.(Grid.Column)" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="860" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="text.(Grid.ColumnSpan)" Value="1" />
<Setter Target="text1.(Grid.Row)" Value="0" />
<Setter Target="text1.(Grid.Column)" Value="1" />
<Setter Target="text2.(Grid.Row)" Value="1" />
<Setter Target="text2.(Grid.Column)" Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox x:Name="text" PlaceholderText="NOME" />
<TextBlock x:Name="text1" Grid.Row="0" Grid.Column="1" Text="Note"></TextBlock>
<TextBox x:Name="text2" Grid.Row="1" Grid.Column="1" PlaceholderText="AGGIUNGI NOTA" ></TextBox>
</Grid>