사용자 제어의 시각적 상태로 인해 렌더링 속도가 느려집니다.

GridView에서 여러 제품을 렌더링하는 뷰가있는 UWP 응용 프로그램을 개발 중이며 렌더링 할 각 제품에 대한 데이터 템플릿을 만들었습니다. 아래는 첨부 된 XAML 코드입니다.

Visual Studio Profiler를 실행하여 레이아웃 렌더링에 걸리는 시간을 디버깅 할 때 레이아웃 섹션에서 각 제품 템플릿의 ListViewItemPresenter가 렌더링하는 데 약 6-7ms가 걸리므로 GridView에 10 개의 제품이 있으면 70ms가 추가됩니다. 궁극적으로 UI를 느리게 만드는 렌더링의 경우 UI가 렌더링 될 때 표시되는 뷰에 로더가 있지만 이번에는 단축하고 싶습니다.

누구든지 도울 수 있습니까?

어떤 도움이라도 대단히 감사하겠습니다.

<UserControl.Resources>
    <converters:ProductQuantityVisibilityConverter x:Key="ProductQuantityVisibilityConverter" />
    <!--<converters:DoubleDigitVisibilityConverter x:Key="DoubleDigitVisibilityConverter" />
    <converters:TripleDigitVisibilityConveter x:Key="TripleDigitVisibilityConveter" />
    <converters:FourDigitVisibilityConverter x:Key="FourDigitVisibilityConverter" />-->

    <Style TargetType="Button"
           BasedOn="{StaticResource ButtonWithNoBorder}"
           x:Name="QuantityButtonStyle">
        <Setter Property="Background"
                Value="White" />
        <Setter Property="HorizontalAlignment"
                Value="Stretch" />
        <Setter Property="HorizontalContentAlignment"
                Value="Left" />
        <Setter Property="Padding"
                Value="2,0" />
        <Setter Property="Foreground"
                Value="{StaticResource CancelButtonForeGround}" />
        <Setter Property="FontFamily"
                Value="Segoe UI Light" />
        <Setter Property="FontWeight"
                Value="Light" />
        <Setter Property="VerticalAlignment"
                Value="Stretch" />
        <Setter Property="VerticalContentAlignment"
                Value="Center" />
    </Style>

</UserControl.Resources>


<Grid Background="White">
    <VisualStateManager.VisualStateGroups>

        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <trigger:EqualsStateTrigger Value="{x:Bind ProductDetails.FontSizeSelector, Mode=OneWay}"
                                                EqualTo="1" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="txtQuantity.FontSize"
                            Value="57" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <trigger:EqualsStateTrigger Value="{x:Bind ProductDetails.FontSizeSelector, Mode=OneWay}"
                                                EqualTo="2" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="txtQuantity.FontSize"
                            Value="47" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <trigger:EqualsStateTrigger Value="{x:Bind ProductDetails.FontSizeSelector, Mode=OneWay}"
                                                EqualTo="3" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="txtQuantity.FontSize"
                            Value="33" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid>

        <!--#region When Quantity is zero-->
        <Grid x:Name="productWithZeroQuantity" 
              Padding="0">
            <Button x:Name="btnProductImage"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Padding="0"
                    Style="{StaticResource ButtonWithNoBorder}"
                    Command="{x:Bind IncreaseQuantityCommand,Mode=OneWay}"
                    CommandParameter="{x:Bind ProductDetails.StockCode, Mode=OneWay}"
                    Height="60"
                    Width="120">
                <Button.Background>
                    <ImageBrush Stretch="Fill"
                                ImageSource="{x:Bind ProductDetails.ImageSource, Mode=OneWay}" />
                </Button.Background>
                <Rectangle Width="{Binding ActualWidth, ElementName=btnProductImage}"
                           Height="{Binding ActualHeight, ElementName=btnProductImage}"
                           Margin="0">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0"
                                             EndPoint="0,1">
                            <GradientStop Offset="0.728"
                                          Color="#50FFFFFF" />
                            <GradientStop Offset="1"
                                          Color="#FFF9F1F1" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <i:Interaction.Behaviors>
                    <ic:EventTriggerBehavior EventName="Holding">
                        <ic:InvokeCommandAction Command="{x:Bind SetQuantityCommand, Mode=OneWay}"
                                                CommandParameter="{x:Bind ProductDetails.StockCode, Mode=OneWay}" />
                    </ic:EventTriggerBehavior>
                    <ic:EventTriggerBehavior EventName="RightTapped">
                        <ic:InvokeCommandAction Command="{x:Bind SetQuantityCommand, Mode=OneWay}"
                                                CommandParameter="{x:Bind ProductDetails.StockCode, Mode=OneWay}" />
                    </ic:EventTriggerBehavior>
                </i:Interaction.Behaviors>
            </Button>
        </Grid>
        <!--#endregion-->

        <!--#region When quantity is positive-->

        <Grid Padding="0"
              x:Name="ProductWithPositiveQuantity"
              Visibility="{Binding Quantity, Converter={StaticResource ProductQuantityVisibilityConverter}}"
              Grid.Row="1"
              Height="60"
              Width="120">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button x:Name="txtQuantity"
                    Style="{StaticResource QuantityButtonStyle}"
                    Command="{x:Bind IncreaseQuantityCommand,Mode=OneWay}"
                    FontSize="57"
                    Content="{x:Bind ProductDetails.Quantity, Mode=OneWay}"
                    CommandParameter="{x:Bind ProductDetails.StockCode, Mode=OneWay}">
            </Button>
            <Button Background="{StaticResource LightGray}"
                    Grid.Column="1"
                    Opacity="0.95"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    Style="{StaticResource ButtonWithNoBorder}"
                    Command="{x:Bind DecreaseQuantityCommand, Mode=OneWay}"
                    CommandParameter="{x:Bind ProductDetails.StockCode, Mode=OneWay}">
                <Image Stretch="None"
                       Source="ms-appx:///Images/HotCategories/MinusIcon.png" />
            </Button>
            <i:Interaction.Behaviors>
                <ic:EventTriggerBehavior EventName="Holding">
                    <ic:InvokeCommandAction Command="{x:Bind SetQuantityCommand, Mode=OneWay}"
                                            CommandParameter="{x:Bind ProductDetails.StockCode, Mode=OneWay}" />
                </ic:EventTriggerBehavior>
                <ic:EventTriggerBehavior EventName="RightTapped">
                    <ic:InvokeCommandAction Command="{x:Bind SetQuantityCommand, Mode=OneWay}"
                                            CommandParameter="{x:Bind ProductDetails.StockCode, Mode=OneWay}" />
                </ic:EventTriggerBehavior>
            </i:Interaction.Behaviors>
        </Grid>

        <!--#endregion-->

    </Grid>
    <Border Background="{StaticResource DarkGray}"
            Height="20"
            Width="120"
            Grid.Row="1">
        <TextBlock Text="{x:Bind ProductDetails.Description, Mode=OneWay}"
                   Padding="3,2,2,2"
                   FontSize="12"
                   FontWeight="SemiBold"
                   TextTrimming="CharacterEllipsis"
                   HorizontalAlignment="Left"
                   Foreground="White" />
    </Border>
</Grid>