web-dev-qa-db-ja.com

親ウィンドウを塗りつぶすUWPグリッド

私たちは学校のプロジェクトに取り組んでおり、行き止まりに直面しています。 gridを親ウィンドウ全体に表示しようとしていますが、これを行うことはできません。

これはデザイナーが示すものであり、どのように見えるかを示しています。 enter image description here

そして、これは私たちがそれを実行したときの見え方です： enter image description here

以下は、xamlコードです。

<Grid x:Name="Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, RelativeSource = {RelativeSource Mode=TemplatedParent}}" Height="{Binding ActualHeight, RelativeSource ={RelativeSource Mode=TemplatedParent}}">
    <Grid.Background>
        <ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
    </Grid.Background>

    <!--Search section-->

    <RelativePanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ElementName=Grid,Path=ActualWidth}">
        <TextBlock Text="Find available apartment" FontSize="24" Margin="30" RelativePanel.AlignHorizontalCenterWithPanel="True" />
        <AutoSuggestBox Name="AutoSuggestBox" 
                        PlaceholderText="Search" 
                        Width="300" 
                        RelativePanel.AlignHorizontalCenterWithPanel="True" 
                        Margin="0,100,0,0"
                        TextChanged="AutoSuggestBox_OnTextChanged"
                        Header="Destination:"/>
        <CalendarDatePicker Name="CheckInPicker" Header="Check in:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,40,0,0" PlaceholderText="select a date" IsTodayHighlighted="False"/>
        <CalendarDatePicker Name="CheckOutPicker" Header="Check out:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignRightWith="AutoSuggestBox" Margin="0,40,0,0"/>
        <ComboBox x:Name="numberOfGuestsBox"  Width="127" RelativePanel.Below="CheckInPicker" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,30,0,0" PlaceholderText="Choose" Header="Guests:" FontSize="15">
            <x:String>1</x:String>
            <x:String>2</x:String>
            <x:String>3</x:String>
            <x:String>4</x:String>
            <x:String>5</x:String>
            <x:String>6</x:String>
            <x:String>7</x:String>
            <x:String>8</x:String>
            <x:String>9</x:String>
            <x:String>10</x:String>
        </ComboBox>
        <ToggleSwitch Header="Smoking allowed?" Margin="0,30,0,0" RelativePanel.Below="CheckOutPicker" RelativePanel.AlignLeftWith="CheckOutPicker" OffContent="Eew - No!" OnContent="Ya man!"/>
        <Button x:Name="SearchButton" Content="Search available apartments" RelativePanel.Below="numberOfGuestsBox" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,30,0,30" Width="300" Height="50" Background="MediumSeaGreen" Foreground="AliceBlue" Click="SearchButton_Click"/>
    </RelativePanel>
</Grid>

これについてはどうすればよいですか？
私たちはストレッチですべてのように見えるものを試しました。余白は、サイズを変更できるようにするため、実際にはオプションではありません。

（私たちにとって）グリッドは相対パネルに適合しており、そのサイズに縮小しているようです。グリッドをウィンドウの画面サイズに合わせると、相対パネルが中央に配置されることはある程度確実です。よろしくお願いします！

編集：

問題の原因となっている可能性のあるフレーム内に「ビュー」を保持します。フレームのサイズを変更すると、画像のサイズが変更され、スプリットビューが「中央」に移動しますが、スプリットビューでも画像でもスケーリングが機能しません。

スプリットビューのコードは次のとおりです。

    <!--Split View-->
    <SplitView Name="MySplitView" 
               Grid.Row="1" 
               DisplayMode="CompactOverlay" 
               OpenPaneLength="200" 
               CompactPaneLength="48" 
               HorizontalAlignment="Left">

        <!--SplitView Pane for icons-->
        <SplitView.Pane>
            <ListBox Name="IconsLIstBox" SelectionMode="Single" SelectionChanged="IconsLIstBox_OnSelectionChanged">
                <ListBoxItem Name="HomeListItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE10F;"/>
                        <TextBlock Text="Home" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="LocationsListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE1D1;"/>
                        <TextBlock Text="Locations" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="MostPopularListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE24A;"/>
                        <TextBlock Text="Most Popular" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="MapListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE128;"/>
                        <TextBlock Text="Map" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="ProfileListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE170;"/>
                        <TextBlock Text="Profile" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="ContactListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE166;"/>
                        <TextBlock Text="Contact" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
            </ListBox>
        </SplitView.Pane>

        <!--SplitView Content-->
        <Frame x:Name="MyFrame" HorizontalAlignment="Left" Width="1043"/>
    </SplitView>

</Grid>

フレームをsplitview.contentの内側に置いてみましたが、2つの間に違いはありません。

c#xamlgriduwp
9
Evilunclebill

:)時々XAMLは簡単な場合があります。

GridやRelativePanelなどのコンテナコントロールは、親の使用可能なフルサイズに自動的にスケーリングされますが、StackPanelなどの他のコントロールは、子要素に必要な最小サイズまでしか拡大しません。後者のタイプのみが必要ですHorizontalAlignment="Stretch"およびVerticalAlignment="Stretch"で画面を埋めます。 Width/Heightプロパティをバインドしないでください。

これは全画面表示に十分なはずです（グリッドがページの下にあり、StackPanelまたは同様のコントロールではない場合）：

<Grid x:Name="Grid">
    <Grid.Background>
        <ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
    </Grid.Background>

    <!--Search section-->

    <RelativePanel>
        ...
    </RelativePanel>
</Grid>

質問の分割ビューの追加コードに応じて編集：

SplitViewとFrameの両方にHorizontAlignment="Left"。つまり、「フルスクリーンを使用する代わりに、必要最小限のサイズだけを使用して、左揃えにします」。それらの割り当てとFrameの幅を削除します。親コントロールを塗りつぶしたいときに、配置（左/右/中央）またはサイズ（幅/高さ）を使用しないようにします。

<!--Split View-->
<SplitView Name="MySplitView" 
           Grid.Row="1" 
           DisplayMode="CompactOverlay" 
           OpenPaneLength="200" 
           CompactPaneLength="48">
....

    <!--SplitView Content-->
    <Frame x:Name="MyFrame" />
</SplitView>
19
Bart