10

それで、私は Windows アプリでの作業を再開したばかりで、思いどおりに動作しないことがいくつかあります (おそらく、サンプルが見つからず、Channel9 ビデオが私のケースをカバーしていないためです)。

この記事から始めて、「再配置」手法は、大画面から小画面に移動するときにアプリに適した手法であると判断しました。

私がしたことは、 a を使用し、StackPanel2 つの s を使用してその向きを変更することです (1 つは幅 0 用、もう 1 つは 720 用、こちらAdaptiveTriggerの表に基づいています)。

これはちょっとうまくいきますが、ペイント編集された醜いスクリーンショットで説明するいくつかの問題があります。

これはBigScreen、同じ行に A と B の両方を配置するのに十分なスペースがある場合に発生します。ここでの問題は、B が残りの幅全体を取り、青い部分をすべてカバーする必要があることです。

大画面

2 番目の問題は、サイズ変更に関連しています。十分なスペースがない場合、緑色の部分はリサイズされずに切り取られます (右側の境界線が消えていることがわかります)。これは、 を使用しStackPanelてレイアウトをレスポンシブにする前には発生しませんでした。

ハーフスクリーン

最後に、このSmallScreen状況では、方向が垂直に変わり、最初の問題と同じ問題が発生します。緑色の部分の高さが画面いっぱいになりません。

スモールスクリーン

XAMLページに使用されるのは次のとおりです。

<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>

StackPanel緑色の部分がないと、使用可能なすべての領域をカバーして、本来のページに収まることに注意してください。残念ながら、この手法の実装方法を示すサンプルがないため、より良い解決策を思い付くことができませんでした。新しい も使用してみましRelativePanelたが、AdaptiveTriggerのSetterような添付プロパティでは機能しないようRelativePanel.RightOfです。

コードビハインドを使用せずにこの手法を適用して成功した人はいますか?

編集：

私はこれGridを2行と2列で使用して、AdaptiveTriggerすべてのコンテンツを行から列へ、またはその逆に移動させました。

4

2 に答える 2

4

セッターを介して RelativePanel 添付プロパティ値を変更することができます。構文は次のようになります。

<Setter Target="SomeXAMLObject.(RelativePanel.RightOf)" Value="SomeOtherXAMLObject" />
于 2015-07-12T12:17:42.213 に答える
0

(StackPanel の代わりに) グリッドを使用して、次のようなプロポーショナル ディメンションを使用して行を定義してみませんか。

`<Grid>
 <Grid.RowDefinitions>
  <RowDefinition width="2*"/>
  <RowDefinition width="3*"/>
  <RowDefinition width="1*"/>
 </Grid.RowDefinitions>
</Grid>`
于 2015-07-12T10:00:00.487 に答える