स्केलिंग ऑर्डर बदलें WPF

Question

मेरे पास एक WPF एप्लिकेशन है जिसे उत्तरदायी होने की आवश्यकता है। मैं Grid के अंदर क्या चाहता हूं। जब विंडो स्केल हो जाती है, तो मुझे Grid पहले आकार बदलने के लिए, और फिर DataGrid चाहिए। यहाँ मैं अब तक क्या हासिल है:

शीर्ष पर gif आप देख सकते हैं कि Grid पहले आकार बदलता है, और जब यह तक पहुँच जाता है यह कम से कम स्केलिंग आकार है, यह नीचे DataGrid से अधिक हो जाता है। बिल्कुल वही नहीं जो मैं चाहता हूं क्योंकि मैं पहले लेआउट को स्केल करना चाहता हूं, फिर लेआउट के बजाय DataGrid में स्क्रॉलबार दिखाएं।

ठीक है यहाँ आप देख सकते हैं कि यह स्क्रॉलबार से पता चलता है कि मैं चाहता हूँ: तो मैं निम्नलिखित की कोशिश की। केवल एक चीज यह है कि यह पहले डेटाग्रिड का आकार बदलता है, और जब यह डेटाग्रिड का आकार बदलता है, तो यह ग्रिड का आकार बदलना शुरू कर देता है। मैं इसे दूसरी तरफ देखना चाहता हूं, पहले ग्रिड का आकार बदलें, फिर डेटाग्रिड का आकार बदलें और स्क्रॉलबार दिखाएं। इसलिए मूल रूप से मैं एक समाधान की तलाश कर रहा हूं जो निम्न कार्य करता है:

1. ग्रिड को स्केल करने वाली विंडो स्केल करें।
2. ग्रिड को न्यूनतम आकार
3. जब यह न्यूनतम आकार तक पहुंच गया है और यह अभी भी छोटा हो रहा है, तो डेटाग्रिड में स्क्रॉलबार दिखाएं।

ताकि नीचे पहले Gif से यह सवाल से डेटा ग्रिड

में स्क्रॉलबार के बाद आता है,? वहाँ यह करने के लिए कोई तरीका है ऐसा लगता है कि मैं बहुत करीब हूं क्योंकि यह उन दो चीजों का संयोजन है लेकिन मुझे नहीं पता कि कैसे। यहां मेरा कोड है:

<Grid Grid.Row="1" HorizontalAlignment="Right" Grid.Column="0"> 
    <Grid ShowGridLines="False"> 
    <Grid.RowDefinitions> 
     <RowDefinition MaxHeight="50"/> 
     <RowDefinition Height="auto"/> 
     <RowDefinition MaxHeight="20"/> 
     <RowDefinition Height="auto"/> 
     <RowDefinition MaxHeight="5"/> 
     <RowDefinition Height="auto"/> 
     <RowDefinition MaxHeight="5"/> 
     <RowDefinition Height="auto"/> 
     <RowDefinition MaxHeight="5"/> 
     <RowDefinition Height="auto"/> 
     <RowDefinition MaxHeight="50"/> 
     <RowDefinition Height="auto"/> 
     <RowDefinition MaxHeight="50"/> 
     <RowDefinition Height="auto"/> 
     <RowDefinition MaxHeight="5"/> 
     <RowDefinition Name="DataGridRow" Height="*" MaxHeight="240" /> 
    </Grid.RowDefinitions> 

    <Label Grid.Row="1" FontSize="24">Test</Label> 
    <Label Grid.Row="3" Content="Test"/> 
    <ComboBox Grid.Row="5" MaxWidth="500" MinWidth="300" HorizontalAlignment="Left" /> 
    <Label Grid.Row="7" Content="Test"/> 
    <ComboBox Grid.Row="9" MaxWidth="500" MinWidth="300" HorizontalAlignment="Left"/> 
    <Separator Grid.Row="11"/> 

    <Label Grid.Row="13" Content="Test" /> 
    <Grid Grid.Row="15"> 
     <DataGrid 
      RowHeight="40" 
      CanUserAddRows="False" 
      x:Name="dataGrid" 
      AutoGenerateColumns="False" 
      CanUserResizeColumns="True" 
      HeadersVisibility="None" 
      GridLinesVisibility="None" 
      ScrollViewer.CanContentScroll="True" 
      ScrollViewer.VerticalScrollBarVisibility="Visible" 
      ScrollViewer.HorizontalScrollBarVisibility="Auto" 
     <DataGrid.Columns> 
      <DataGridTextColumn IsReadOnly="True" Width="*" Binding="{Binding Name}"> 
      <DataGridTextColumn.ElementStyle> 
       <Style TargetType="TextBlock"> 
       <Setter Property="VerticalAlignment" Value="Center" /> 
       <Setter Property="Margin" Value="2,0,0,0"/> 
       </Style> 
      </DataGridTextColumn.ElementStyle> 
      </DataGridTextColumn> 
     </DataGrid.Columns> 
     </DataGrid> 
    </Grid> 
    </Grid> 
</Grid> 

Answer 1

उन मामलों में जहां लेआउट समीकरण को हल करना डिफ़ॉल्ट बिल्डिंग ब्लॉक के साथ अब संभव नहीं है, तो आप गणना कर सकते हैं। कनवर्टर को छोड़कर उपलब्ध स्थान की गणना करना।

शेष समस्या दोहरा है:

1. DataGrid केवल हटना सकता है जब स्टार आकार पंक्तियों ActualHeight 0.

   समाधान है: DataGrid.Style कि सेट dataGrid.MaxHeight जब triggerGrid.ActualHeight = 0 (triggerGrid पर है एक सितारा आकार पंक्ति)।

2. जब हम एक MinHeightDataGridRow करने के लिए इसे हटना नहीं होगा जब dataGrid.ActualHeight सिकुड़ता दे रहे हैं (यह सिकुड़ ऊंचाई वापस चुरा)।

   समाधान: RowDefinition.Style कि अपनी MinHeight dataGrid.ActualHeight जब triggerGrid.ActualHeight = 0 करने के लिए और करने के लिए निश्चित मान अन्यथा निर्धारित करता है।

मैं वर्णन करने के लिए नियंत्रण 'BackGround रंग निर्धारित किया है जब स्टार आकार ऊंचाई (सफेद स्थान शेष) 0.

<Window 

    ... 

    Width="200" Height="450"> 
    <Window.Resources> 
     <local:HeightConverter x:Key="HeightConverter" /> 
     <local:IsEqualToZeroConverter x:Key="IsEqualToZeroConverter" /> 
    </Window.Resources> 
    <!--MainGrid--> 
    <Grid x:Name="mainGrid"> 
     <Grid ShowGridLines="False"> 
      <Grid.RowDefinitions> 
       <RowDefinition MaxHeight="50"/> 
       <RowDefinition Height="auto"/> 
       <RowDefinition MaxHeight="20"/> 
       <RowDefinition Height="auto"/> 
       <RowDefinition MaxHeight="5"/> 
       <RowDefinition Height="auto"/> 
       <RowDefinition MaxHeight="5"/> 
       <RowDefinition Height="auto"/> 
       <RowDefinition MaxHeight="5"/> 
       <RowDefinition Height="auto"/> 
       <RowDefinition MaxHeight="50"/> 
       <RowDefinition Height="auto"/> 
       <RowDefinition MaxHeight="50"/> 
       <RowDefinition Height="auto"/> 
       <RowDefinition MaxHeight="5"/> 
       <RowDefinition x:Name="dataGridRow" Height="Auto"> 
        <RowDefinition.Style> 
         <Style TargetType="{x:Type RowDefinition}"> 
          <Style.Triggers> 
           <DataTrigger Binding="{Binding ActualHeight, ElementName=triggerGrid, Converter={StaticResource IsEqualToZeroConverter}}" Value="True"> 
            <Setter Property="MinHeight" Value="{Binding ActualHeight, ElementName=dataGrid}"/> 
           </DataTrigger> 
           <DataTrigger Binding="{Binding ActualHeight, ElementName=triggerGrid, Converter={StaticResource IsEqualToZeroConverter}}" Value="False"> 
            <Setter Property="MinHeight" Value="80.0"/> 
           </DataTrigger> 
          </Style.Triggers> 
         </Style> 
        </RowDefinition.Style> 
       </RowDefinition> 
      </Grid.RowDefinitions> 
      <Label x:Name="bigLabel" Grid.Row="1" FontSize="24" Background="LightGray">Test</Label> 
      <Label x:Name="regularLabel" Grid.Row="3" Content="Test" Background="LightGray"/> 
      <ComboBox x:Name="comboBox" Grid.Row="5" MaxWidth="500" MinWidth="300" HorizontalAlignment="Left" Background="LightGray" /> 
      <Label Grid.Row="7" Content="Test" Background="LightGray"/> 
      <ComboBox Grid.Row="9" MaxWidth="500" MinWidth="300" HorizontalAlignment="Left" Background="LightGray"/> 
      <Separator x:Name="separator" Grid.Row="11"/> 
      <Label Grid.Row="13" Content="Test" Background="LightGray"/> 
      <!--TriggerGrid--> 
      <Grid Grid.Row="14" x:Name="triggerGrid"/> 
      <Grid Grid.Row="15"> 
       <DataGrid 
        x:Name="dataGrid" 
        RowHeight="40" 
        CanUserAddRows="False" 
        AutoGenerateColumns="False" 
        CanUserResizeColumns="True" 
        HeadersVisibility="None" 
        GridLinesVisibility="None" 
        ScrollViewer.CanContentScroll="True" 
        ScrollViewer.VerticalScrollBarVisibility="Visible" 
        ScrollViewer.HorizontalScrollBarVisibility="Auto"> 
        <DataGrid.Style> 
         <Style TargetType="{x:Type DataGrid}"> 
          <Style.Triggers> 
           <DataTrigger Binding="{Binding ActualHeight, ElementName=triggerGrid}" Value="0"> 
            <Setter Property="MaxHeight"> 
             <Setter.Value> 
              <MultiBinding Converter="{StaticResource HeightConverter}"> 
               <Binding ElementName="mainGrid" Path="ActualHeight"/> 
               <Binding ElementName="bigLabel" Path="ActualHeight"/> 
               <Binding ElementName="regularLabel" Path="ActualHeight"/> 
               <Binding ElementName="comboBox" Path="ActualHeight"/> 
               <Binding ElementName="separator" Path="ActualHeight"/> 
              </MultiBinding> 
             </Setter.Value> 
            </Setter> 
           </DataTrigger> 
          </Style.Triggers> 
         </Style> 
        </DataGrid.Style> 
        <DataGrid.Columns> 
         <DataGridTextColumn IsReadOnly="True" Width="*" Binding="{Binding Name}"> 
          <DataGridTextColumn.ElementStyle> 
           <Style TargetType="TextBlock"> 
            <Setter Property="VerticalAlignment" Value="Center" /> 
            <Setter Property="Margin" Value="2,0,0,0"/> 
           </Style> 
          </DataGridTextColumn.ElementStyle> 
         </DataGridTextColumn> 
        </DataGrid.Columns> 
       </DataGrid> 
      </Grid> 
     </Grid> 
    </Grid> 
</Window> 

कन्वर्टर्स हो जाता है

public class HeightConverter : IMultiValueConverter 
{ 
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) 
    { 
     // only 1 check at startup (Debugging) 
     if ((double)values[1] == 0.0) return 0.0; 

     double mainGridHeight  = (double)values[0]; 
     double bigLabelHeight  = (double)values[1]; 
     double regularLabelHeight = (double)values[2]; 
     double comboBoxHeight  = (double)values[3]; 
     double separatorHeight  = (double)values[4]; 

     double dataGridHeight = mainGridHeight - bigLabelHeight - 2 * (regularLabelHeight + comboBoxHeight) - regularLabelHeight - separatorHeight; 

     if (dataGridHeight > 0.0) return dataGridHeight; else return 0.0; 
    } 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

public class IsEqualToZeroConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     return ((double)value == 0.0); 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

Answer 2

यह सही जवाब नहीं है। लेकिन, यह आपकी ज़रूरत को पूरा करने का विचार देगा।

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" />    
     <RowDefinition Height="5" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <DockPanel>       
     <TextBlock DockPanel.Dock="Bottom" Grid.Row="1" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" MaxHeight="240">DataGrid</TextBlock> 
     <Separator DockPanel.Dock="Bottom"/> 
     <TextBlock DockPanel.Dock="Bottom" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock> 
    </DockPanel> 
    <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" /> 
    <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock> 
</Grid> 

आशा है कि मदद करता है।