I am using a VisualStateManager in the XAML to specify a change in the width/height of a grid column/row by using the ColumnDefinition and RowDefinition x:Name properties. I read here that this is possible... but Visual Studio says "Failed to find element named _____" with a warning, and the state change for the grid row does not work (the setters for changing row/column assignments trigger correctly, so I know the VisualStateManager is working overall).
The intended effect is to have the content vertically take up exactly the screen (with no vertical scrolling) in the wide state, with each block being in a different column. Then in the narrow state, the content will reflow to instead be all in the same column but different rows (thus vertically stacked), and thus vertical scrolling will be necessary (the content will also change from having a fixed width in the wide state, to stretching to take up the window width in the narrow state).
My code looks something like this:
<Page>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ContentBlockA.(Grid.Column)" Value="0"></Setter>
<Setter Target="ContentBlockB.(Grid.Column)" Value="0"></Setter>
<Setter Target="ContentBlockC.(Grid.Column)" Value="0"></Setter>
<Setter Target="ContentBlockA.(Grid.Row)" Value="2"></Setter>
<Setter Target="ContentBlockB.(Grid.Row)" Value="1"></Setter>
<Setter Target="ContentBlockC.(Grid.Row)" Value="0"></Setter>
<Setter Target="ContentRowZero.Height" Value="Auto"></Setter>
<Setter Target="ContentColumnZero.Width" Value="*"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="900"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<!-- Empty setters defaults to the layout specified in XAML below. -->
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ContentColumnZero"
Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="ContentRowZero"
Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid Name="ContentBlockA"
Grid.Column="0">
<!-- Content here -->
</Grid>
<Grid Name="ContentBlockB"
Grid.Column="1">
<!-- Content here -->
</Grid>
<Grid Name="ContentBlockC"
Grid.Column="2">
<!-- Content here -->
</Grid>
</Grid>
</ScrollViewer>
</Grid>
</Page>
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 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>
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)
So, I've just started working again with Windows apps and there are a few things that I can't get working as I want (probably because I coulnd't find any sample and Channel9 videos didn't cover my case).
Starting from this article, I decided that the "reposition" technique is the one that fits my app when moving from a big screen to a smaller one.
What I did is using a StackPanel and changing its orientation using two AdaptiveTriggers (one for 0 width and another one for 720, based on the table here).
This kinda works but there are some issues that I'll illustrate with some ugly paint-edited screenshots.
This is what happens when I'm in the BigScreen situation, where there's enough space to have both A and B on the same row. The problem here is that B should take the full remaining width, covering all the blue part.
The second issue is related to resizing. When there's not enough space, the green part gets cut instead of being resized (you can see that the right border disappeared). This didn't happen before using the StackPanel to make the layout responsive.
Finally, when we are in the SmallScreen situation, orientation changes to be vertical and we have the same problem as the first one: green part's height doesn't fill the screen.
Here's the XAML used for the page:
<Page
x:Class="Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WifiAnalyzerFinal.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:mvvm="using:Mvvm"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SmallScreen">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="StackPanel.Orientation"
Value="Vertical"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BigScreen">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="StackPanel.Orientation"
Value="Horizontal"/>
<Setter Target="Rect.Width"
Value="200"/>
<Setter Target="Rect.Height"
Value="Auto"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical"
Background="Blue"
x:Name="StackPanel">
<Rectangle Fill="Red"
Height="50"
x:Name="Rect"
Width="Auto"/>
<ListView ItemsSource="{Binding Stuff}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Green"
Width="Auto"
BorderBrush="DarkGreen"
BorderThickness="5"
Padding="5">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0,0,0,5"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</StackPanel>
</Grid>
</Page>
Please note that without the StackPanel the green part fits the page as it should, covering all the available area. Unfortunately I couldn't came up with a better solution because there's no sample telling us how this technique should be implemented. I also tried using the new RelativePanel but it seems that the AdaptiveTrigger's Setter doesn't work with attached properties like RelativePanel.RightOf.
Is there someone who's been successful is applying this technique without having to use code-behind?
EDIT:
I got this working using a Grid with 2 rows and 2 columns, with the AdaptiveTrigger moving all the content from row to column and viceversa.
It is possible to change RelativePanel attached property values through setters. The syntax goes like this:
<Setter Target="SomeXAMLObject.(RelativePanel.RightOf)" Value="SomeOtherXAMLObject" />
Why don't you try to use grid (instead of StackPanel) and define rows using proportional dimensions like:
`<Grid>
<Grid.RowDefinitions>
<RowDefinition width="2*"/>
<RowDefinition width="3*"/>
<RowDefinition width="1*"/>
</Grid.RowDefinitions>
</Grid>`