CODEWITHSUNDEEP
c#.netxamluwp
Going-gone
Going-gone

Reputation: 292

Is there any known reasons my GUIs controls change after changing to target version 17314, from 15063?

My application uses a pivot menu. The pivot menu items contain a user control which is a page, so you click on a pivot item, and it brings you to the detail page of that pivot, sort of like master/detail style.

I want to upgrade my target version to the version 17134, but when I do this I get some strange behavior with the controls. The border within the pivot in 15063 version adjusts its size depending on the content. In 17134, its not adjusting it's size to the content.

I've tried setting height=auto on scrollviewer which is the holder of the content presenter in the pivot. I've tried many different things with heights on the various controls, but no luck. Any help is much appreciated.

This is the pivot

 <Control.Resources>
    <vmc:NullableIntToIntConverter  x:Key="NullableIntToIntConverter"/>
    <Style TargetType="PivotHeaderItem">
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
        <Setter Property="FontSize" Value="20" />
        <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
        <Setter Property="Background" Value="#477DAC" />
        <!--6B84AA-->
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
        <Setter Property="Height" Value="35" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PivotHeaderItem">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualStateGroup.Transitions>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="UnselectedLocked">
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="FontWeight">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Bold" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="FontWeight">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Bold" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedPressed">
                                    <Storyboard>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <ContentPresenter.RenderTransform>
                                <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                        <Border x:Name="TopLine" Height="2" Background="#D3D3D3" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
                        <Border x:Name="BottomLine" Height="2" Background="#D3D3D3" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" />
                        <Border x:Name="RightLine" Width="1" Background="#D3D3D3" VerticalAlignment="Stretch" HorizontalAlignment="Right" Height="{TemplateBinding Height}" />
                        <Border x:Name="LeftLine" Width="1"  Background="#D3D3D3" VerticalAlignment="Stretch" HorizontalAlignment="Left" Height="{TemplateBinding Height}" />
                        <Border x:Name="SelectedLine" Height="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="#D3D3D3" Margin="15,0,0,0" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<StackPanel>
    <Border BorderBrush="#477DAC" BorderThickness="1,1,1,1"  Margin="0,0,0,0"   >
        <Pivot Name="pvtSecondLevel" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"  Background="#FFFFFF" ManipulationMode="None" Padding="0" >
            <Pivot.HeaderTemplate>
                <DataTemplate x:DataType="models:MenuItem">
                    <TextBlock Text="{Binding HeaderTitle, Mode=OneWay}"/>
                </DataTemplate>
            </Pivot.HeaderTemplate>
            <Pivot.ItemTemplate  >
                <DataTemplate x:DataType="models:MenuItem" >
                    <ScrollViewer >
                        <ContentPresenter  Content="{Binding Content}"   />
                    </ScrollViewer>
                </DataTemplate>
            </Pivot.ItemTemplate>
        </Pivot>
    </Border>
</StackPanel>

This is a general page template all of the pages follow, which is the Content in the pivot

<local:BaseControl
    x:Class="LD75ClaimSystem.UI.View.IncomeDetailsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:LD75ClaimSystem.UI.View"
    xmlns:grid="using:Telerik.UI.Xaml.Controls.Grid"
    xmlns:vm="using:LD75ClaimSystem.UI.ViewModel"
    mc:Ignorable="d"
    <StackPanel DataContext="{StaticResource VM}" >
        <Grid Margin="10,0,0,0">
            <Button Content="Add Income"  Margin="0,10,0,0" />
            <ComboBox Header="Claim" Grid.Column="2"/>
        </Grid>
        <grid:RadDataGrid Name="DetailsGrid">
            <grid:RadDataGrid.Columns>

            </grid:RadDataGrid.Columns>
        </grid:RadDataGrid>
    </StackPanel>
</local:BaseControl>

This is the expected behavior, and the behavior with version 15063. If i take the grid out, the border will adjust its size to fit the content.

expected expected

This is the result of version 17314. The border does not adjust to the size anymore, and seems to be controlled by magic, as it does it's own thing.

not expected not expected

UPDATE After downloading the sdk for 16299, the unexpected behaviors went away. The target version 17134 still causes the unexpected behavior.

https://i.sstatic.net/CS1pz.jpg

Upvotes: 0

Views: 106

Answers (1)

Lee McPherson
Lee McPherson

Reputation: 931

I'm not an expert at RadDataGrid but it seems to me from looking at this question/answer for it (https://www.telerik.com/forums/raddatagrid-and-scroll-bar), it contains its own ScrollViewer for data. That means you don't need the ScrollViewer in your Pivot's DataTemplate.

Second, your StackPanel inside your BaseControl won't tell the containing controls what its Height is... because it will keep expanding to fit the contents. So, your RadDataGrid is not using its ScrollViewer at all in this case. I'd expect your weird height/margin issues to be related to how the different versions of the 'ScrollViewer' / 'StackPanel' and RadDataGrid negotiate their respective sizes.

It might go away if you remove the ScrollViewer and replace the StackPanel with a Grid containing two RowDefinitions... one with Auto height and the second with * height.

Something like this:

<local:BaseControl
    x:Class="LD75ClaimSystem.UI.View.IncomeDetailsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:LD75ClaimSystem.UI.View"
    xmlns:grid="using:Telerik.UI.Xaml.Controls.Grid"
    xmlns:vm="using:LD75ClaimSystem.UI.ViewModel"
    mc:Ignorable="d"
    <Grid DataContext="{StaticResource VM}" >
       <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Content="Add Income"  Margin="10,10,0,0" />
        <ComboBox Header="Claim" HorizontalAlignment="Right" Margin="0,10,10,0"/>
        <grid:RadDataGrid Name="DetailsGrid" Grid.Row="1">
            <grid:RadDataGrid.Columns>

            </grid:RadDataGrid.Columns>
        </grid:RadDataGrid>
    </StackPanel>
</local:BaseControl>

Upvotes: 1

Related Questions