यूडब्ल्यूपी ग्रिड पैरेंट विंडो भरने के लिए

Question

हम एक स्कूल प्रोजेक्ट पर काम कर रहे हैं और एक मृत अंत में भाग गए हैं। हम grid को संपूर्ण पेरेंट विंडो भरने की कोशिश कर रहे हैं लेकिन हम बस ऐसा करने में सक्षम नहीं हैं।

यह वही डिजाइनर शो है और हम इसे कैसे देखना चाहते हैं:

और यह कि यह कैसा दिखता है जब हम इसे चलाने:

:

यहाँ हमारे 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 अंदर जा रहा है लेकिन इन दोनों के बीच कोई अंतर नहीं है के साथ की कोशिश की है:

यहाँ SPLITVIEW के लिए कोड है।

Answer 1

आप कड़ी मेहनत कर रहे हैं :) कभी-कभी एक्सएएमएल आसान हो सकता है।

Grid और RelativePanel तरह

कंटेनर नियंत्रण स्वचालित रूप से अपने माता पिता से भरा उपलब्ध आकार के पैमाने पर जबकि StackPanel अन्य लोगों की तरह केवल न्यूनतम आकार अपने बच्चे तत्वों के लिए आवश्यक करने के लिए बढ़ता है। स्क्रीन को भरने के लिए केवल बाद वाले प्रकार को HorizontalAlignment="Stretch" और VerticalAlignment="Stretch" की आवश्यकता होती है। कभी चौड़ाई/ऊंचाई गुणों को बांधें।

यह पूर्ण स्क्रीन पर जाने के लिए (यदि आपके ग्रिड है सीधे एक पेज के नीचे और एक 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>