Rad Pane and Listbox visibility

Question

I am having two ListBoxes in a rad pane, I want one ListBox visible to one user and both list boxes visible to another user.

When I am making the ListBox, hidden the height is not adjusted, it is having a white space.

Here is the code and please refer to the pics.

<telerik:RadPane x:Name="customerfilterPane"
Header="{Binding ApplicationStrings.CustomerPanelTitle, Source={StaticResource ResourceWrapper}}"
CanUserClose="False"
GotFocus="customerfilterPane_GotFocus"
telerik:StyleManager.Theme="Summer">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="50" />
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0" >
                            <ListBox x:Name="lstCustomers"
                                ScrollViewer.VerticalScrollBarVisibility="Auto"
                                 VerticalAlignment="Stretch"
                                 VerticalContentAlignment="Stretch"
                                 ItemsSource="{Binding ItemList,
                                 Source={StaticResource CustomerViewModel}}"
                                 HorizontalAlignment="Stretch"
                                 HorizontalContentAlignment="Stretch"
                                 >
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                <CheckBox x:Name="chkCustomer"
                                IsChecked="{Binding IsChecked, Mode=TwoWay}"
                                Content="{Binding CustomerName}"
                                Click="chkCustomer_Click" />
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                        </Border>

                        <Border  Grid.Row="1"  Margin="4" BorderThickness="3" CornerRadius="2"
                                  Visibility="{Binding IsPanelHiddenToCustomer, Source={StaticResource PlannerViewModel},Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
                            <StackPanel Orientation="Vertical" Visibility="{Binding IsPanelHiddenToCustomer, Source={StaticResource PlannerViewModel},Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
                                <TextBlock Text="{Binding ApplicationStrings.PlannerPanelTitle, Source={StaticResource ResourceWrapper}}" />

                                <ListBox x:Name="lstCustomerPlanner"    ScrollViewer.VerticalScrollBarVisibility="Auto"
                                 VerticalAlignment="Stretch" Height="180"
                                 Visibility="{Binding IsPanelHiddenToCustomer, Source={StaticResource PlannerViewModel},Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
                                 VerticalContentAlignment="Stretch"
                                 ItemsSource="{Binding ItemList, Source={StaticResource PlannerViewModel}}"
                                 HorizontalAlignment="Stretch"
                                 HorizontalContentAlignment="Stretch"
                                 >
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <CheckBox x:Name="chkCustomerPlanner"
                                              IsChecked="{Binding IsChecked, Mode=TwoWay}"
                                              Content="{Binding PlannerId}"
                                              Click="chkPlanner_Click" />
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                        </StackPanel>
                        </Border>
                        <StackPanel Orientation="Horizontal"
                                    FlowDirection="LeftToRight"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Stretch"
                                    Grid.Row="2">
                            <Button Content="{Binding ApplicationStrings.CheckAll, Source={StaticResource ResourceWrapper}}"
                                    Style="{StaticResource StandardButtonStyle}"
                                    Click="Customer_CheckAll" Margin="0,0,4,0" />
                            <Button Content="{Binding ApplicationStrings.UncheckAll, Source={StaticResource ResourceWrapper}}"
                                    Margin="0 0 4 0"
                                    Style="{StaticResource StandardButtonStyle}"
                                    Click="Customer_UncheckAll" />
                            <Button Content="{Binding ApplicationStrings.Apply, Source={StaticResource ResourceWrapper}}"
                                    Margin="0 0 0 0" x:Name="btnCustApply"
                                    Style="{StaticResource StandardButtonStyle}"
                                    Click="Customer_Apply" />
                        </StackPanel>
                    </Grid>
                </telerik:RadPane>

I would be great full to you for resolving this.

Answer 1

I figured it out,I am checking if the user is logged and setting the grid height as 0 in code behind, and instead of putting the list box in stack panel I took a separate grid. Now I am ale to satisfy my requirement.. thank you for your help....

                    <telerik:RadPane x:Name="storefilterPane"
                                 Header="{Binding ApplicationStrings.StorePanelTitle, Source={StaticResource ResourceWrapper}}"
                                 IsPinned="True"
                                 CanDockInDocumentHost="False"
                                 CanUserClose="False"
                                 CanUserPin="True"
                                 GotFocus="storefilterPane_GotFocus"
                                 telerik:StyleManager.Theme="Summer"
                                 >
                    <Grid>
                        <Grid.RowDefinitions>
                            <!--<RowDefinition Height="Auto"  />-->
                            <RowDefinition Height="*" x:Name="grplanner"/>
                            <RowDefinition Height="Auto"  />
                            <RowDefinition Height="*"  />
                            <RowDefinition Height="40" />
                        </Grid.RowDefinitions>

                        <Border HorizontalAlignment="Stretch"
                                              VerticalAlignment="Stretch">
                        <!--<telerik:RadWrapPanel Grid.Row="0"
                                              Orientation="Vertical"
                                              HorizontalAlignment="Stretch"
                                              VerticalAlignment="Stretch">-->
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>


                            <TextBlock  Text="{Binding ApplicationStrings.PlannerPanelTitle, Source={StaticResource ResourceWrapper}}"
                                 Visibility="{Binding IsPanelHiddenToCustomer, Source={StaticResource PlannerViewModel},Converter={StaticResource InvertedBooleanToVisibilityConverter}}"/>
                        <ListBox x:Name="lstStorePlanner"  
                                 VerticalAlignment="Stretch" 
                                 Visibility="{Binding IsPanelHiddenToCustomer, Source={StaticResource PlannerViewModel},Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
                                 VerticalContentAlignment="Stretch" 
                                 ItemsSource="{Binding ItemList, Source={StaticResource PlannerViewModel}}"
                                 HorizontalAlignment="Stretch"
                                 HorizontalContentAlignment="Stretch"
                                 telerik:StyleManager.Theme="Summer"
                                 Grid.Row="1"
                                 >
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <CheckBox x:Name="chkStorePlanner"
                                              IsChecked="{Binding IsChecked, Mode=TwoWay}"
                                              Content="{Binding PlannerId}"
                                              Click="chkPlanner_Click" />
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                            </Grid>
                        </Border>
                        <!--</telerik:RadWrapPanel>-->

                        <controls:ExtendedGridSplitter Grid.Row="1" x:Name="gridSplitterStore"
                                           VerticalAlignment="Center"
                                           HorizontalAlignment="Stretch"
                                           Height="8"
                                           CollapseMode="Next"
                                           Background="LightBlue" />


                        <Border Grid.Row="2" 
                                              HorizontalAlignment="Stretch"
                                              VerticalAlignment="Stretch">
                        <!--<telerik:RadWrapPanel Grid.Row="2" 
                                              Orientation="Vertical"
                                              HorizontalAlignment="Stretch"
                                              VerticalAlignment="Stretch">-->
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                        <TextBlock  Text="{Binding ApplicationStrings.StorePanelTitle, Source={StaticResource ResourceWrapper}}" x:Name="tbStores"
                             Visibility="{Binding IsPanelHiddenToCustomer, Source={StaticResource PlannerViewModel},Converter={StaticResource InvertedBooleanToVisibilityConverter}}" />
                        <ListBox  x:Name="lstStores" 
                            VerticalAlignment="Stretch" 
                            Grid.Row="1" 
                            VerticalContentAlignment="Stretch"  ScrollViewer.VerticalScrollBarVisibility="Auto"
                            ItemsSource="{Binding ItemList, Source={StaticResource StoreLookupViewModel}}"
                            HorizontalAlignment="Stretch" 
                            HorizontalContentAlignment="Stretch"
                            telerik:StyleManager.Theme="Summer"
                            >
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                        <CheckBox x:Name="chkStore"
                                        IsChecked="{Binding IsChecked, Mode=TwoWay}"
                                        Content="{Binding StoreName}"
                                        Click="chkStore_Click" />
                                        </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                            </Grid>
                        <!--</telerik:RadWrapPanel >-->
                        </Border>
                        <StackPanel Orientation="Horizontal" x:Name="spStore"
                            FlowDirection="LeftToRight"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center" Margin="0,3"
                            Grid.Row="3">
                            <Button Content="{Binding ApplicationStrings.CheckAll, Source={StaticResource ResourceWrapper}}"
                                Style="{StaticResource StandardButtonStyle}" 
                                Click="Store_CheckAll" Margin="0,0,4,0" />
                            <Button Content="{Binding ApplicationStrings.UncheckAll, Source={StaticResource ResourceWrapper}}"
                                Margin="0 0 4 0"
                                Style="{StaticResource StandardButtonStyle}"
                                Click="Store_UncheckAll" />
                            <Button Content="{Binding ApplicationStrings.Apply, Source={StaticResource ResourceWrapper}}"
                                    Margin="0 0 0 0"  x:Name="btnStrApply"
                                    Style="{StaticResource StandardButtonStyle}"
                                    Click="Store_Apply" />
                        </StackPanel>
                    </Grid>
                </telerik:RadPane>

And in code behind

                grdCustPlanner.Height = new GridLength(0);
                grplanner.Height = new GridLength(0);
                gridSplitterCust.Visibility = Visibility.Collapsed;
                gridSplitterStore.Visibility = Visibility.Collapsed;

Answer 2

You have specified a height for both rows:

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="50" />
</Grid.RowDefinitions>

This means that no matter the content of the row the height of the row will always follow this formula:

(Available Height - 50) / 2

In order to ensure that the grid collapses you need to specify height = "auto" for the grid rows

<Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition Height="auto" />
    <RowDefinition Height="50" />
</Grid.RowDefinitions>

Obviously this will mean that the grid cells will take up whatever space they need (which may not be the right size) - in this case you can just use MinHeight on the top row to prevent the row from shrinking, or ensure the child controls set themselves to the correct size.