[英]Change controls size layout when changing window's size UWP
我想讓我的控件以相同的邊距變大,就像給窗口的大小增加10%,所有控件都應像窗口一樣大10%,如果窗口太寬,它們應該變寬...等等。
我進行了很多搜索,發現了以下主題: https : //msdn.microsoft.com/windows/uwp/layout/layouts-with-xaml,但仍然不知道如何做出我想要的東西。 我沒有很多控件,它們只有9個! 他們是計時器,僅此而已!
我可以在Forms或WPF中完成此操作,但是在Windows UI中,XAML阻止了許多功能,因此我無法像對其他功能一樣進行操作。 這就是為什么我試圖找到另一種替代方法。
WPF XAML:
<Page
x:Class="SpecCountdown.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SpecCountdown"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:FieldModifier="public" x:Name="mainGrid" Background="Black" Loaded="Grid_Loaded" HorizontalAlignment="Left" Width="1910">
<TextBlock x:FieldModifier="public" x:Name="playerTxt" Margin="57,66,0,0" TextWrapping="Wrap" Text="PLAYER:" Foreground="#FF0015FF" FontSize="36" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="148"/>
<Border x:FieldModifier="public" x:Name="separator1" Height="1" Margin="43,135,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top" />
<TextBlock x:FieldModifier="public" x:Name="modeTxt" Margin="57,149,0,0" TextWrapping="Wrap" Text="PREP TIME:" Foreground="#FF0015FF" FontSize="42" Height="51" VerticalAlignment="Top" HorizontalAlignment="Left" Width="247"/>
<Border x:FieldModifier="public" x:Name="separator2" Height="1" Margin="43,216,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top"/>
<TextBlock x:FieldModifier="public" x:Name="nextUpTxt" Margin="57,230,0,0" TextWrapping="Wrap" Text="NEXT UP:" Foreground="#FF0015FF" FontSize="36" Height="67" VerticalAlignment="Top" HorizontalAlignment="Left" Width="171"/>
<TextBlock x:FieldModifier="public" x:Name="currPlayerTxt" Margin="0,66,1333,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" TextAlignment="Right" Height="56" VerticalAlignment="Top" HorizontalAlignment="Right" Width="349"/>
<TextBlock x:FieldModifier="public" x:Name="nextPlayerTxt" Margin="228,230,0,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="349" TextAlignment="Right"/>
<TextBlock x:FieldModifier="public" x:Name="timerTxt" Margin="349,153,0,0" TextWrapping="Wrap" Text="0000:00" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="228" TextAlignment="Right"/>
</Grid>
我想要使其變得靈活以及更改窗口大小的所有功能。
我認為您想在Windows sieze更改時更改控件的大小。但是TextBlock的大小與TextBlock的FontSize相同。由於這個原因,我使用ViewBox,其大小將與Page大小相同。如果您未設置頁面,在“框架”中,頁面的大小將與窗口的大小一樣大。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Viewbox>
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="#FF0015FF"></Setter>
<Setter Property="FontSize"
Value="36"></Setter>
<Setter Property="HorizontalAlignment"
Value="Center"></Setter>
<Setter Property="VerticalAlignment"
Value="Center"></Setter>
<Setter Property="Margin"
Value="10,10,10,10"></Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="PLAYER:"
></TextBlock>
<TextBlock Grid.Column="1"
Text="N/A"></TextBlock>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="PREP TIME:"></TextBlock>
<TextBlock Grid.Column="1"
Text="0000:00"></TextBlock>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="NEXT UP:" ></TextBlock>
<TextBlock Grid.Column="1"
Text="N/A"></TextBlock>
</Grid>
</Grid>
</Viewbox>
</Grid>
http://7xqpl8.com1.z0.glb.clouddn.com/ChangeControlsSizeLayout.gif
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.