CODEWITHSUNDEEP
wpfxaml
Peekay
Peekay

Reputation: 451

xaml User control layout -Sizing

I have a parent user control which has a detail section and a tree section in it. My intention is on two toggle button i should be able to hide and show the controls. Attached the Image

 <DockPanel>
        <DockPanel DockPanel.Dock="Left">
            <view:ListBoxUserControl DockPanel.Dock="Top" Visibility="{Binding IsListVisible ,Converter={StaticResource BoolToVisibilityConverter}}"/>
            <view:TreeUserControl DockPanel.Dock="Top" Visibility="{Binding IsTreeVisible,Converter={StaticResource BoolToVisibilityConverter}}"/>
        </StackPanel>
          <view:DetailSectionUserControl/>
    </StackPanel>

IsListVisible and IsTreeVisible is set based on two toggle button in the view.

so when IsListVisible is false the ListBoxUserControl will be hidden and TreeUserControl will move to top. this is working well.

But there are two problems here i face. 1) Requirement is that the both controls should be having same size. here the first tree will be created based on the items in it and rest of the space will be taken by TreeUserControl. How shall i make the size even.

2) When i add an item to ListBoxUserControl the control just grows and TreeUserControl size get reduced. How shall i get a scroll instead .

Upvotes: 1

Views: 69

Answers (1)

omerts
omerts

Reputation: 8838

Try:

<Grid>
  <Grid.RowDefinitions>
      <RowDefinition>
          <RowDefinition.Style>
              <Style TargetType="{x:Type RowDefinition}">
                  <Setter Property="Height" Value="*" />
                  <Style.Triggers>
                      <DataTrigger Binding="{Binding IsListVisible}" Value="False">
                          <Setter Property="Height" Value="0" />
                      </DataTrigger>
                  </Style.Triggers>
              </Style>
          </RowDefinition.Style>
      </RowDefinition>
      <RowDefinition>
          <RowDefinition.Style>
              <Style TargetType="{x:Type RowDefinition}">
                  <Setter Property="Height" Value="*" />
                  <Style.Triggers>
                      <DataTrigger Binding="{Binding IsTreeVisible}" Value="False">
                          <Setter Property="Height" Value="0" />
                      </DataTrigger>
                  </Style.Triggers>
              </Style>
          </RowDefinition.Style>
      </RowDefinition>
  </Grid.RowDefinitions>

  <ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <view:ListBoxUserControl  Visibility="{Binding IsListVisible ,Converter={StaticResource BoolToVisibilityConverter}}"/>      
  </ScrollViewer>

  <view:TreeUserControl Grid.Row="1" Visibility="{Binding IsTreeVisible,Converter={StaticResource BoolToVisibilityConverter}}"/>

</Grid>

Upvotes: 1

Related Questions