calculator/src/Calculator/Views/DateCalculator.xaml

<UserControl x:Class="CalculatorApp.DateCalculator"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="using:CalculatorApp.Controls"
             xmlns:converters="using:CalculatorApp.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="using:CalculatorApp"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="300"
             d:DesignWidth="400"
             Loaded="OnLoaded"
             mc:Ignorable="d">

    <UserControl.Resources>
        <converters:BooleanNegationConverter x:Key="BooleanNegationConverter"/>
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <converters:BooleanToVisibilityNegationConverter x:Key="BooleanToVisibilityNegationConverter"/>

        <DataTemplate x:Key="ComboBoxItemContentTemplate">
            <TextBlock Text="{Binding}" TextWrapping="WrapWholeWords"/>
        </DataTemplate>

        <Style x:Key="DateCalculation_ComboStyle" TargetType="ComboBox">
            <Setter Property="Padding" Value="0,0,0,0"/>
            <Setter Property="MinHeight" Value="20"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
            <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
            <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="FocusVisualMargin" Value="-5,0,0,0"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <CarouselPanel/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="BackgroundElement.Background" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                            <Setter Target="SelectedContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}"/>
                                            <Setter Target="DropDownGlyph.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="BackgroundElement.Background" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                            <Setter Target="SelectedContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseMediumBrush}"/>
                                            <Setter Target="DropDownGlyph.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseMediumBrush}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DropDownStates">
                                    <VisualState x:Name="Opened">
                                        <Storyboard>
                                            <SplitOpenThemeAnimation ClosedTargetName="SelectedContentPresenter"
                                                                     OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
                                                                     OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
                                                                     OpenedTargetName="PopupBorder"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Closed">
                                        <Storyboard>
                                            <SplitCloseThemeAnimation ClosedTargetName="SelectedContentPresenter"
                                                                      OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
                                                                      OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
                                                                      OpenedTargetName="PopupBorder"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="ContentPresenter" Opacity="0"/>
                            <Popup x:Name="Popup">
                                <Border x:Name="PopupBorder"
                                        Margin="0,-1,0,-1"
                                        HorizontalAlignment="Stretch"
                                        Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
                                        BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
                                        BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}">
                                    <ScrollViewer x:Name="ScrollViewer"
                                                  MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownContentMinWidth}"
                                                  Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                                  AutomationProperties.AccessibilityView="Raw"
                                                  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                                  VerticalSnapPointsAlignment="Near"
                                                  VerticalSnapPointsType="OptionalSingle"
                                                  ZoomMode="Disabled">
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                            <Border x:Name="BackgroundElement"
                                    Grid.ColumnSpan="2"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"/>
                            <TextBlock x:Name="SelectedContentPresenter"
                                       Margin="{TemplateBinding Padding}"
                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                       Style="{ThemeResource BodyTextBlockStyle}"
                                       FontWeight="SemiBold"
                                       AutomationProperties.AccessibilityView="Raw"
                                       FlowDirection="{TemplateBinding FlowDirection}"
                                       Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedValue.Content}"
                                       TextWrapping="WrapWholeWords"/>
                            <TextBlock x:Name="DropDownGlyph"
                                       Grid.Column="1"
                                       Margin="8,3,12,0"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Center"
                                       Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                       FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       FontSize="12"
                                       AutomationProperties.AccessibilityView="Raw"
                                       IsHitTestVisible="False"
                                       Text="&#xE0E5;"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="DateCalculation_CalendarPickerStyle" TargetType="CalendarDatePicker">
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"/>
            <Setter Property="BorderThickness" Value="{ThemeResource CalendarDatePickerBorderThemeThickness}"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="FocusVisualMargin" Value="-5,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CalendarDatePicker">
                        <Grid x:Name="Root">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="32"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="32"/>
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Target="DateText.Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"/>
                                            <Setter Target="CalendarGlyph.Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="BorderElement.Background" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                            <Setter Target="DateText.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}"/>
                                            <Setter Target="CalendarGlyph.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="BorderElement.Background" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                            <Setter Target="DateText.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseMediumBrush}"/>
                                            <Setter Target="CalendarGlyph.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseMediumBrush}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <FlyoutBase.AttachedFlyout>
                                <Flyout Placement="Full">
                                    <Flyout.FlyoutPresenterStyle>
                                        <Style TargetType="FlyoutPresenter">
                                            <Setter Property="MaxHeight" Value="9000"/>
                                            <Setter Property="MaxWidth" Value="9000"/>
                                            <Setter Property="Padding" Value="0"/>
                                            <Setter Property="BorderThickness" Value="0"/>
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="FlyoutPresenter">
                                                        <Grid>
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="128"/>
                                                                <RowDefinition Height="Auto"/>
                                                                <RowDefinition Height="*"/>
                                                            </Grid.RowDefinitions>
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition x:Name="LeftGutter" Width="0"/>
                                                                <ColumnDefinition x:Name="C0" Width="*"/>
                                                                <ColumnDefinition x:Name="RightGutter" Width="0"/>
                                                            </Grid.ColumnDefinitions>
                                                            <VisualStateManager.VisualStateGroups>
                                                                <VisualStateGroup>
                                                                    <VisualState x:Name="LeftAlignedLayout">
                                                                        <VisualState.StateTriggers>
                                                                            <AdaptiveTrigger MinWindowWidth="360"/>
                                                                        </VisualState.StateTriggers>
                                                                        <VisualState.Setters>
                                                                            <Setter Target="LeftGutter.Width" Value="12"/>
                                                                            <Setter Target="RightGutter.Width" Value="*"/>
                                                                            <Setter Target="C0.Width" Value="336"/>
                                                                        </VisualState.Setters>
                                                                    </VisualState>
                                                                    <VisualState x:Name="DefaultLayout">
                                                                        <VisualState.StateTriggers>
                                                                            <AdaptiveTrigger MinWindowWidth="0"/>
                                                                        </VisualState.StateTriggers>
                                                                    </VisualState>
                                                                </VisualStateGroup>
                                                            </VisualStateManager.VisualStateGroups>
                                                            <ContentPresenter Grid.Row="1"
                                                                              Grid.Column="1"
                                                                              Margin="0,0,0,0"
                                                                              HorizontalAlignment="Stretch"
                                                                              VerticalAlignment="Top"
                                                                              Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
                                                                              BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
                                                                              BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}"
                                                                              Content="{TemplateBinding Content}"
                                                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                              ContentTransitions="{TemplateBinding ContentTransitions}"/>
                                                        </Grid>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Flyout.FlyoutPresenterStyle>
                                    <CalendarView x:Name="CalendarView"
                                                  Style="{TemplateBinding CalendarViewStyle}"
                                                  CalendarIdentifier="{TemplateBinding CalendarIdentifier}"
                                                  DayOfWeekFormat="{TemplateBinding DayOfWeekFormat}"
                                                  DisplayMode="{TemplateBinding DisplayMode}"
                                                  FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
                                                  IsGroupLabelVisible="{TemplateBinding IsGroupLabelVisible}"
                                                  IsOutOfScopeEnabled="{TemplateBinding IsOutOfScopeEnabled}"
                                                  IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
                                                  MaxDate="{TemplateBinding MaxDate}"
                                                  MinDate="{TemplateBinding MinDate}"/>
                                </Flyout>
                            </FlyoutBase.AttachedFlyout>
                            <ContentPresenter x:Name="HeaderContentPresenter"
                                              Margin="{ThemeResource ComboBoxHeaderThemeMargin}"
                                              x:DeferLoadStrategy="Lazy"
                                              Content="{TemplateBinding Header}"
                                              ContentTemplate="{TemplateBinding HeaderTemplate}"
                                              Visibility="Collapsed"/>
                            <Border x:Name="BorderElement"
                                    Grid.Row="1"
                                    Grid.ColumnSpan="2"
                                    Background="{TemplateBinding Background}"
                                    BorderThickness="0"/>
                            <TextBlock x:Name="DateText"
                                       Grid.Row="1"
                                       Padding="0,0,0,2"
                                       HorizontalAlignment="Right"
                                       VerticalAlignment="Center"
                                       Style="{ThemeResource BaseTextBlockStyle}"
                                       Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                       Text="{TemplateBinding PlaceholderText}"/>
                            <FontIcon x:Name="CalendarGlyph"
                                      Grid.Row="1"
                                      Grid.Column="1"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                      FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                      FontSize="16"
                                      Glyph="&#xE787;"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="DateCalculation_CalendarViewStyle" TargetType="CalendarView">
            <Setter Property="FocusBorderBrush" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="SelectedHoverBorderBrush" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}"/>
            <Setter Property="SelectedPressedBorderBrush" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}"/>
            <Setter Property="SelectedBorderBrush" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
            <Setter Property="HoverBorderBrush" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
            <Setter Property="PressedBorderBrush" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}"/>
            <Setter Property="TodayForeground" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}"/>
            <Setter Property="BlackoutForeground" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
            <Setter Property="SelectedForeground" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
            <Setter Property="PressedForeground" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
            <Setter Property="OutOfScopeForeground" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"/>
            <Setter Property="CalendarItemForeground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="OutOfScopeBackground" Value="Transparent"/>
            <Setter Property="CalendarItemBackground" Value="Transparent"/>
            <Setter Property="CalendarItemBorderBrush" Value="Transparent"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlHyperlinkBaseMediumHighBrush}"/>
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="CalendarItemBorderThickness" Value="2"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="DayItemFontSize" Value="18"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Margin" Value="0,12,0,12"/>
            <Setter Property="IsTabStop" Value="False"/>
        </Style>

        <MenuFlyout x:Key="ResultsContextMenu" x:Name="ResultsContextMenu">
            <MenuFlyoutItem x:Name="CopyMenuItem"
                            x:Uid="CopyMenuItem"
                            Click="OnCopyMenuItemClicked"
                            Icon="Copy"/>
        </MenuFlyout>
    </UserControl.Resources>

    <Grid x:Name="DateCalculatorGrid"
          Margin="12,0,12,0"
          AutomationProperties.LandmarkType="Main">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="C0" Width="*"/>
            <ColumnDefinition x:Name="C1" Width="0"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"
                           MinHeight="{StaticResource HamburgerHeight}"
                           MaxHeight="52"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="8*"/>
        </Grid.RowDefinitions>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup CurrentStateChanged="OnVisualStateChanged">
                <VisualState x:Name="LeftAlignedLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="480"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="C0.Width" Value="456"/>
                        <Setter Target="C1.Width" Value="*"/>
                        <Setter Target="DateDiffAllUnitsResultLabel.FontSize" Value="24"/>
                        <Setter Target="DateResultLabel.FontSize" Value="24"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="DefaultLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="DateDiffAllUnitsResultLabel.FontSize" Value="20"/>
                        <Setter Target="DateResultLabel.FontSize" Value="20"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <!-- ComboBox for Date Calculation options -->
        <ComboBox x:Name="DateCalculationOption"
                  x:Uid="DateCalculationOption"
                  Grid.Row="1"
                  Style="{ThemeResource DateCalculation_ComboStyle}"
                  SelectedIndex="0">
            <ComboBoxItem x:Uid="Date_DifferenceOption"
                          MinWidth="276"
                          ContentTemplate="{StaticResource ComboBoxItemContentTemplate}"
                          IsSelected="{Binding IsDateDiffMode, Mode=TwoWay}"/>
            <ComboBoxItem x:Uid="Date_AddSubtractOption"
                          MinWidth="276"
                          ContentTemplate="{StaticResource ComboBoxItemContentTemplate}"
                          IsSelected="{Binding IsDateDiffMode, Converter={StaticResource BooleanNegationConverter}, Mode=TwoWay}"/>
        </ComboBox>

        <!-- Grid to Calculate Difference between Two Dates -->
        <Grid x:Name="DateDiffGrid"
              Grid.Row="2"
              Visibility="{Binding IsDateDiffMode, Converter={StaticResource BooleanToVisibilityConverter}}">
            <Grid.RowDefinitions>
				<RowDefinition Height="1*" MaxHeight="17"/>
                <RowDefinition Height="Auto" MinHeight="32"/>
                <RowDefinition Height="1*" MaxHeight="24"/>
                <RowDefinition Height="Auto" MinHeight="32"/>
                <RowDefinition Height="1*" MaxHeight="24"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="1*" MaxHeight="8"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- From Date -->
            <CalendarDatePicker x:Name="DateDiff_FromDate"
                                x:Uid="DateDiff_FromHeader"
                                Grid.Row="1"
                                Style="{StaticResource DateCalculation_CalendarPickerStyle}"
                                CalendarViewStyle="{StaticResource DateCalculation_CalendarViewStyle}"
                                Closed="CalendarFlyoutClosed"
                                DateChanged="FromDate_DateChanged"/>

            <!-- To Date -->
            <CalendarDatePicker x:Name="DateDiff_ToDate"
                                x:Uid="DateDiff_ToHeader"
                                Grid.Row="3"
                                Margin="0,0,0,0"
                                Style="{StaticResource DateCalculation_CalendarPickerStyle}"
                                CalendarViewStyle="{StaticResource DateCalculation_CalendarViewStyle}"
                                Closed="CalendarFlyoutClosed"
                                DateChanged="ToDate_DateChanged"/>

            <!-- Difference Result -->
            <TextBlock x:Uid="Date_DifferenceLabel"
                       Grid.Row="5"
                       Margin="0,0,0,0"
                       Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"/>
            <TextBlock x:Name="DateDiffAllUnitsResultLabel"
                       Grid.Row="6"
                       Style="{ThemeResource SubtitleTextBlockStyle}"
                       FontWeight="SemiBold"
                       AutomationProperties.LiveSetting="Polite"
                       AutomationProperties.Name="{Binding StrDateDiffResultAutomationName}"
                       ContextFlyout="{StaticResource ResultsContextMenu}"
                       IsTextSelectionEnabled="True"
                       Text="{Binding StrDateDiffResult}"/>
            <TextBlock Grid.Row="8"
                       Style="{ThemeResource BaseTextBlockStyle}"
                       Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                       ContextFlyout="{StaticResource ResultsContextMenu}"
                       IsTextSelectionEnabled="True"
                       Text="{Binding StrDateDiffResultInDays, Mode=OneWay}"
                       Visibility="{Binding IsDiffInDays, Converter={StaticResource BooleanToVisibilityNegationConverter}}"/>
        </Grid>

        <!-- Grid for Add/Subtract Date -->
        <Grid x:Name="AddSubtractDateGrid"
              Grid.Row="2"
              x:DeferLoadStrategy="Lazy"
              Loaded="AddSubtractDateGrid_Loaded"
              Visibility="{Binding IsDateDiffMode, Converter={StaticResource BooleanToVisibilityNegationConverter}}">

            <Grid.RowDefinitions>
                <RowDefinition Height="1*" MaxHeight="17"/>
                <RowDefinition Height="Auto" MinHeight="32"/>
                <RowDefinition Height="1*" MaxHeight="23"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="1*" MaxHeight="29"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="1*" MaxHeight="35"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- From Date -->
            <CalendarDatePicker x:Name="AddSubtract_FromDate"
                                x:Uid="AddSubtract_Date_FromHeader"
                                Grid.Row="1"
                                Margin="0,0,0,0"
                                Style="{StaticResource DateCalculation_CalendarPickerStyle}"
                                CalendarViewStyle="{StaticResource DateCalculation_CalendarViewStyle}"
                                Closed="CalendarFlyoutClosed"
                                DateChanged="AddSubtract_DateChanged"/>

            <Grid Grid.Row="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <RadioButton x:Name="AddOption"
                             x:Uid="AddOption"
                             MinWidth="80"
                             MaxWidth="160"
                             VerticalAlignment="Top"
                             Checked="AddSubtractOption_Checked"
                             IsChecked="{Binding IsAddMode, Mode=TwoWay}"/>
                <RadioButton x:Name="SubtractOption"
                             x:Uid="SubtractOption"
                             Grid.Column="1"
                             MinWidth="80"
                             MaxWidth="160"
                             Margin="20,0,0,0"
                             VerticalAlignment="Top"
                             Checked="AddSubtractOption_Checked"
                             IsChecked="{Binding IsAddMode, Converter={StaticResource BooleanNegationConverter}, Mode=TwoWay}"/>

            </Grid>

            <!-- Date Offset to be Added/Subtracted -->
            <Grid x:Name="DateOffsetGrid" Grid.Row="5">

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBlock x:Name="YearsLabel"
                           x:Uid="YearsLabel"
                           Margin="0,0,0,6"
                           Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                           TextWrapping="Wrap"/>
                <ComboBox x:Name="YearsValue"
                          Grid.Row="1"
                          MinWidth="84"
                          AutomationProperties.LabeledBy="{Binding ElementName=YearsLabel}"
                          DropDownClosed="OffsetDropDownClosed"
                          ItemsSource="{Binding OffsetValues, Mode=OneTime}"
                          SelectedIndex="{Binding YearsOffset, Mode=TwoWay}"
                          SelectionChanged="OffsetValue_Changed"/>
                <TextBlock x:Name="MonthsLabel"
                           x:Uid="MonthsLabel"
                           Grid.Column="1"
                           Margin="12,0,12,6"
                           Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                           TextWrapping="Wrap"/>
                <ComboBox x:Name="MonthsValue"
                          Grid.Row="1"
                          Grid.Column="1"
                          MinWidth="84"
                          Margin="12,0,12,0"
                          AutomationProperties.LabeledBy="{Binding ElementName=MonthsLabel}"
                          DropDownClosed="OffsetDropDownClosed"
                          ItemsSource="{Binding OffsetValues, Mode=OneTime}"
                          SelectedIndex="{Binding MonthsOffset, Mode=TwoWay}"
                          SelectionChanged="OffsetValue_Changed"/>
                <TextBlock x:Name="DaysLabel"
                           x:Uid="DaysLabel"
                           Grid.Column="2"
                           Margin="0,0,0,6"
                           Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                           TextWrapping="Wrap"/>
                <ComboBox x:Name="DaysValue"
                          Grid.Row="1"
                          Grid.Column="2"
                          MinWidth="84"
                          AutomationProperties.LabeledBy="{Binding ElementName=DaysLabel}"
                          DropDownClosed="OffsetDropDownClosed"
                          ItemsSource="{Binding OffsetValues, Mode=OneTime}"
                          SelectedIndex="{Binding DaysOffset, Mode=TwoWay}"
                          SelectionChanged="OffsetValue_Changed"/>
            </Grid>

            <!-- Resulting Date -->
            <TextBlock x:Uid="DateLabel"
                       Grid.Row="7"
                       Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"/>

            <TextBlock x:Name="DateResultLabel"
                       Grid.Row="8"
                       Style="{ThemeResource SubtitleTextBlockStyle}"
                       FontWeight="SemiBold"
                       AutomationProperties.LiveSetting="Polite"
                       AutomationProperties.Name="{Binding StrDateResultAutomationName}"
                       ContextFlyout="{StaticResource ResultsContextMenu}"
                       IsTextSelectionEnabled="True"
                       Text="{Binding StrDateResult}"/>
        </Grid>
    </Grid>
</UserControl>