Сохранять объекты внутри вида при изменении размера окна в UWP

В настоящее время я разрабатываю универсальное приложение для окон в качестве школьной работы, и у меня есть большая проблема с сохранением видимых для пользователя функций независимо от размера окна или экрана.

Я сделал меню и рамку, и они, кажется, правильно изменяют размер, рамка сохраняет такое же расстояние от границы окна независимо от размера (до тех пор, пока оно пустое), но содержимое фрейма просто исчезает при изменении высоты или ширины окна , как показано ниже: (серая область представляет собой кадр)Сохранять объекты внутри вида при изменении размера окна в UWP

Всем желаю в том, что, например, один текстовый блок будет иметь 25% от ширины кадра, некоторые другой блока следующего 25% и т.д. ... Я проверил несколько решений от MSDN и stackoverflow, но пока не работает.

Спасибо за вашу помощь & время заранее

XAML код моего проекта в текущем состоянии:

<Page 
    x:Class="Fublisher.real_program" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:Fublisher" 
    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}"> 
     <Grid.ChildrenTransitions> 
      <TransitionCollection> 
       <EntranceThemeTransition FromHorizontalOffset="480" /> 
      </TransitionCollection> 
     </Grid.ChildrenTransitions> 
     <Grid x:Name="GR_STRAN" Margin="0" Padding="0"> 
      <Grid x:Name="GR_MENU" HorizontalAlignment="Left" Width="60" d:LayoutOverrides="TopPosition, BottomPosition"> 
       <Button x:Name="BT_MENU" Content="&#xEA37;" VerticalAlignment="Top" HorizontalAlignment="Stretch" d:LayoutOverrides="LeftPosition, RightPosition" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" FontSize="20" Click="CL_MENU"/> 
       <Button x:Name="BT_MENU_DOMOV" Content="&#xE80F;" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" d:LayoutOverrides="LeftPosition, RightPosition" Margin="0,65,0,0" FontSize="20" Click="CL_DOMOV"/> 
       <Button x:Name="BT_MENU_VSEBINA" Content="&#xE70F;" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" Margin="0,130,0,0" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20" Click="CL_VSEBINA"/> 
       <Button x:Name="BT_MENU_ABOUT" Content="&#xE946;" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20"/> 
       <Button x:Name="BT_MENU_USER" Content="&#xE2AF;" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" Margin="0,0,0,65" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20"/> 
       <Button x:Name="BT_MENU_OBLIKA" Content="&#xE771;" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" Margin="0,195,0,0" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20"/> 
      </Grid> 
      <Grid x:Name="GR_VSEBINA" Margin="60,0,0,0" Background="#FFF1F1F1"> 
       <Frame x:Name="frame6" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition" Margin="10" Background="#FFE2E2E2"/> 
      </Grid> 
     </Grid> 
    </Grid> 
</Page>

И код страницы показали в кадре:

<Page 
    x:Class="Fublisher.home" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:Fublisher" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" Width="1860" Height="1080"> 

    <Grid Background="White"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="1080"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0"/> 
      <ColumnDefinition Width="1860"/> 
     </Grid.ColumnDefinitions> 
     <Grid.ChildrenTransitions> 
      <TransitionCollection> 
       <EntranceThemeTransition FromHorizontalOffset="480" /> 
      </TransitionCollection> 
     </Grid.ChildrenTransitions> 
     <Viewbox Grid.ColumnSpan="2" HorizontalAlignment="Center" Height="336" VerticalAlignment="Center" Width="601"> 
      <Grid Height="336" Width="601"> 
       <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="Hey!" FontSize="120" TextAlignment="Center" FontFamily="Segoe UI Light" Margin="23,0" Height="143" VerticalAlignment="Top" d:LayoutOverrides="LeftPosition, RightPosition"/> 
       <Button x:Name="button" Content="&#xEE56;" FontFamily="Segoe MDL2 Assets" FontSize="53.333" VerticalAlignment="Bottom" Margin="0,0,0,66" HorizontalAlignment="Left" Background="{x:Null}" Height="99" Width="187"/> 
       <Button x:Name="button_Copy" Content="&#xE771;" HorizontalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" FontSize="53.333" VerticalAlignment="Bottom" Margin="207,0,207,66" Background="{x:Null}" Height="99" d:LayoutOverrides="LeftPosition, RightPosition"/> 
       <Button x:Name="button_Copy1" Content="&#xE78B;" FontFamily="Segoe MDL2 Assets" FontSize="53.333" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,1,64" Background="{x:Null}" Height="101" Width="187"/> 
       <TextBlock x:Name="textBlock1" TextWrapping="Wrap" Text="Write" FontSize="26.667" TextAlignment="Center" Height="46" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="187"/> 
       <TextBlock x:Name="textBlock1_Copy" Margin="207,0" TextWrapping="Wrap" Text="Design" FontSize="26.667" TextAlignment="Center" Height="46" VerticalAlignment="Bottom" d:LayoutOverrides="LeftPosition, RightPosition"/> 
       <TextBlock x:Name="textBlock1_Copy1" TextWrapping="Wrap" Text="Publish" FontSize="26.667" TextAlignment="Center" Height="46" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="187"/> 
      </Grid> 
     </Viewbox> 
    </Grid> 
</Page>

источник

2016-11-26 Laurent Resman

Не видя своего XAML, невозможно сказать, что происходит. Можете ли вы опубликовать его? –

Я уже внесли некоторые изменения в пользовательский интерфейс, опубликую его за секунду. –

Правильно, так что вы видите все свои жесткие высоты/ширину/поля? Это твой преступник ... Ваш макет никогда не будет жидким. Например, ваша «сетка» с фиксированной высотой/шириной, сидящая внутри избыточного ViewBox и заполненная объектами с использованием фиксированных полей, как если бы они находились на фиксированном холсте, является прекрасным примером того, как не создавать хороший макет. Поскольку у вас мало чего происходит, если вы дадите наглядный пример того, как вы хотите, чтобы эти материалы были последовательно выложены, я дам вам пример того, как сделать это правильно, чтобы достичь желаемого результата. :) –

Жестко запрограммированные ширин и высоты будут сложными, и, вероятно, невозможно сделать работу в действительно приложении UWP. Вот почему Microsoft имеет Design adaptive UI с адаптивными панелями. Подобно HTML-страницам, объекты должны течь относительно друг друга. Смотрите RelativePanel в ссылке, а затем вы можете добавить код, как

RelativePanel.RightOf="textBox1"

, чтобы указать, кнопка должна быть в RightOf textBox1, как и в их примере.

источник

2016-11-30 14:55:15 ezaspi

Сохранять объекты внутри вида при изменении размера окна в UWP

ответ

Смежные вопросы