问题
in my uwp desktop application. I have crated one user control for header. for responsive UI i am using the VisualStateManager But its not working when i am resizing the page.i want to keep moving right hand side controls to left when i am resizing the page.this code working in some situation.
I want to reduce the middle blank space size when i am resize the window. thanks in advance :)
<UserControl
x:Class="UWPUIResponsive.UC_Header"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:forms="using:Xamarin.Forms"
mc:Ignorable="d"
d:DesignWidth="400" Height="50" BorderBrush="Silver" BorderThickness="0 0 1 1" >
<Grid >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
<Setter Target = "CThree.Width" Value = "Auto" />
<Setter Target = "CFour.Width" Value = "Auto" />
<Setter Target = "CTen.Width" Value = "Auto" />
<Setter Target = "CThree.Width" Value = "Auto" />
<Setter Target = "CEight.Width" Value = "Auto" />
<Setter Target = "CSix.Width" Value = "Auto" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "1250" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
<Setter Target = "Cone.Width" Value = "10*" />
<Setter Target = "CTwo.Width" Value = "60*" />
<Setter Target = "CThree.Width" Value = "250*" />
<Setter Target = "CFour.Width" Value = "16*" />
<Setter Target = "CFive.Width" Value = "*" />
<Setter Target = "CSix.Width" Value = "23*" />
<Setter Target = "CSeven.Width" Value = "" />
<Setter Target = "CEight.Width" Value = "8*" />
<Setter Target = "CNine.Width" Value = "" />
<Setter Target = "CTen.Width" Value = "4*" />
<Setter Target = "CEleven.Width" Value = "25*" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!--VisualState to be triggered when window
width is >=720 effective pixels.-->
<AdaptiveTrigger MinWindowWidth = "500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
<Setter Target = "Cone.Width" Value = "Auto" />
<Setter Target = "CTwo.Width" Value = "Auto" />
<Setter Target = "CThree.Width" Value = "Auto" />
<Setter Target = "CFour.Width" Value = "Auto" />
<Setter Target = "CFive.Width" Value = "Auto" />
<Setter Target = "CSix.Width" Value = "Auto" />
<Setter Target = "CSeven.Width" Value = "" />
<Setter Target = "CEight.Width" Value = "Auto" />
<Setter Target = "CNine.Width" Value = "" />
<Setter Target = "CTen.Width" Value = "Auto" />
<Setter Target = "CEleven.Width" Value = "Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Name="Parent" BorderBrush="Silver" BorderThickness="0 0 1 1" >
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="7*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Cone" Width="10*"/>
<ColumnDefinition x:Name="CTwo" Width="60*"/>
<ColumnDefinition x:Name="CThree" Width="250*"/>
<ColumnDefinition x:Name="CFour" Width="16*"/>
<ColumnDefinition x:Name="CFive" Width="*"/>
<ColumnDefinition x:Name="CSix" Width="23*"/>
<ColumnDefinition x:Name="CSeven"/>
<ColumnDefinition x:Name="CEight" Width="8*"/>
<ColumnDefinition x:Name="CNine"/>
<ColumnDefinition x:Name="CTen" Width="4*"/>
<ColumnDefinition x:Name="CEleven" Width="25*"/>
</Grid.ColumnDefinitions>
<Image Source="Application_Images\circle.png" Stretch="Uniform" Grid.RowSpan="6" Grid.Column="1" Margin="0,0,9,0" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch"/>
<Image Source="Application_Images\circle.png" Stretch="Fill" RenderTransformOrigin="-0.057,0.714" Grid.Column="7" Grid.Row="2" Grid.RowSpan="4" Margin="0,3,0,2" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" Grid.Column="5" Margin="3,3,0,0" Grid.RowSpan="3" Grid.Row="2" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock FontSize="13" Text=" Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" Grid.Column="5" Margin="3,1,0,8" RenderTransformOrigin="0.5,0.5" Grid.Row="4" Grid.RowSpan="3" HorizontalAlignment="Stretch" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleY="1"/>
</TextBlock.RenderTransform>
</TextBlock>
<Button Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="9" Margin="0,0,3,6" RenderTransformOrigin="0.5,0.5" Grid.Row="4" Width="6" Height="5">
<Button.RenderTransform>
<CompositeTransform ScaleX="1" ScaleY="1"/>
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Stretch="Fill" Source="Application_Images\circle.png"/>
</ControlTemplate>
</Button.Template>
<!--<Image Source="dropdown.png" Margin="9,8,0,4" />-->
<Button.Flyout>
<MenuFlyout x:Name="settings">
<MenuFlyoutItem Text = "Profile" />
<MenuFlyoutItem Text = "Sign Out" />
</MenuFlyout>
</Button.Flyout>
</Button>
<Image ToolTipService.ToolTip="Dashboard" Source="Application_Images\circle.png" Stretch="Uniform" Grid.Column="3" Grid.Row="3" Grid.RowSpan="3" Margin="1,0,0,0" VerticalAlignment="Stretch"/>
<StackPanel Background="#E1E1E1" Grid.Column="4" HorizontalAlignment="Center" Margin="0,1,0,13" Width="1" Grid.RowSpan="5" Grid.Row="2" />
</Grid>
</Grid>
</UserControl>
回答1:
The complex Grid layout can be confusing. I simplified your layout based on the actual display of the application, and narrowed the distance between the logo and the account.
<Grid>
<!-- <VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TitleColumn.Width" Value="Auto"/>
<Setter Target="HolderColumn1.Width" Value="Auto"/>
<Setter Target="HolderColumn2.Width" Value="Auto"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="750" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TitleColumn.Width" Value="20*"/>
<Setter Target="HolderColumn1.Width" Value="*"/>
<Setter Target="HolderColumn2.Width" Value="*"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>-->
<Grid x:Name="p" BorderBrush="Silver" BorderThickness="0,0,1,1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="HolderColumn1"/>
<ColumnDefinition Width="20*" x:Name="TitleColumn"/>
<ColumnDefinition Width="Auto" x:Name="AccountColumn"/>
<ColumnDefinition Width="*" x:Name="HolderColumn2"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Image Source="Application_Images\circle.png" Stretch="Uniform" Margin="0,0,9,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Image ToolTipService.ToolTip="Dashboard" VerticalAlignment="Center" Source="Application_Images\circle.png" Stretch="Uniform" HorizontalAlignment="Left" Margin="5,0,0,0"/>
</StackPanel>
<StackPanel Grid.Column="2" BorderBrush="Silver" VerticalAlignment="Center" BorderThickness="1,0,0,0" Margin="15,0,0,0" Padding="15,0,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel VerticalAlignment="Center">
<TextBlock FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" FontWeight="Bold" />
<TextBlock FontSize="13" Text="Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleY="1"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
<Image Source="Application_Images\circle.png" Height="30" Stretch="Uniform" RenderTransformOrigin="-0.057,0.714" Grid.Column="1" Margin="10,3,10,2" VerticalAlignment="Center" />
<Button Background="Transparent" Grid.Column="2" Margin="0,0,3,6" Height="5" RenderTransformOrigin="0.5,0.5" >
<Button.RenderTransform>
<CompositeTransform ScaleX="1" ScaleY="1"/>
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Stretch="Fill" Source="Application_Images\circle.png"/>
</ControlTemplate>
</Button.Template>
<Button.Flyout>
<MenuFlyout x:Name="settings">
<MenuFlyoutItem Text = "Profile" />
<MenuFlyoutItem Text = "Sign Out" />
</MenuFlyout>
</Button.Flyout>
</Button>
</Grid>
</StackPanel>
</Grid>
</Grid>
Here is what display:
Update
In the Grid row/column definition, * represents the space left. However, if the definitions have many *, it means that these spaces are allocated proportionally. such as:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
Means the second column is twice the width of the first column.
And Auto means that the width or height changes as the content changes.
In the layout I gave, the ratio of TitleColumn to HolderColumn is 20:1, which is equivalent to a dynamic Padding, which is not functional. You can also replace it with Grid's Padding.
At this time, the width of the AccountColumn is determined by the content, and all the remaining space is occupied by the TitleColumn. As the width of the window changes, the distance between the controls changes proportionally. This is the reason for self-adaptation.
Best regards.
来源：https://stackoverflow.com/questions/57250223/visualstatemanager-for-ui-responsive-is-not-working-in-uwp