livia-test/Livia/Views/Controls/SearchQueryInputControl.xaml

<UserControl x:Class="Livia.Views.Controls.SearchQueryInputControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:viewModels="clr-namespace:Livia.ViewModels"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:attachedProperties="clr-namespace:Livia.Views.AttachedProperties"
             mc:Ignorable="d"
             d:Width="1800"
             d:Background="{StaticResource PrimaryColorBrush}"
             d:DataContext="{d:DesignInstance Type=viewModels:SearchQueryInputControlViewModel}">
    <StackPanel Orientation="Vertical">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="10" />
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="1"
                     materialDesign:HintAssist.Hint="{StaticResource PatientName}"
                     Foreground="{StaticResource Gray1Brush}"
                     BorderBrush="{StaticResource Gray1Brush}"
                     Text="{Binding PatientName}"
                     Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                     VerticalAlignment="Center" />
            <TextBox Grid.Column="3"
                     materialDesign:HintAssist.Hint="{StaticResource PatientId}"
                     Foreground="{StaticResource Gray1Brush}"
                     BorderBrush="{StaticResource Gray1Brush}"
                     Text="{Binding PatientId}"
                     Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                     VerticalAlignment="Center" />
            <TextBox Grid.Column="5"
                     materialDesign:HintAssist.Hint="{StaticResource PatientSex}"
                     Foreground="{StaticResource Gray1Brush}"
                     BorderBrush="{StaticResource Gray1Brush}"
                     Text="{Binding PatientSex}"
                     Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                     VerticalAlignment="Center" />
            <TextBox Grid.Column="7"
                     materialDesign:HintAssist.Hint="{StaticResource PatientAgeStart}"
                     Foreground="{StaticResource Gray1Brush}"
                     BorderBrush="{StaticResource Gray1Brush}"
                     Text="{Binding PatientAgeStart}"
                     PreviewTextInput="AgeInputPreview"
                     Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                     VerticalAlignment="Center" />
            <TextBlock Grid.Column="8"
                       Foreground="{StaticResource Gray1Brush}"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Style="{StaticResource MaterialDesignBody1TextBlock}"
                       Text="-" />
            <TextBox Grid.Column="9"
                     materialDesign:HintAssist.Hint="{StaticResource PatientAgeEnd}"
                     Foreground="{StaticResource Gray1Brush}"
                     BorderBrush="{StaticResource Gray1Brush}"
                     Text="{Binding PatientAgeEnd}"
                     PreviewTextInput="AgeInputPreview"
                     Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                     VerticalAlignment="Center" />
        </Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="10" />
            </Grid.ColumnDefinitions>
            <DatePicker Grid.Column="1"
                        materialDesign:HintAssist.Hint="{StaticResource ImportTimeStart}"
                        Margin="0, 10"
                        SelectedDate="{Binding ImportTimeStart}"
                        Foreground="{StaticResource Gray1Brush}"
                        BorderBrush="{StaticResource Gray1Brush}"
                        Style="{StaticResource MaterialDesignFloatingHintDatePicker}"
                        CalendarStyle="{StaticResource LiviaCalendar}" />
            <TextBlock Grid.Column="2"
                       Foreground="{StaticResource Gray1Brush}"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Style="{StaticResource MaterialDesignBody1TextBlock}"
                       Text="-" />
            <DatePicker  Grid.Column="3"
                         materialDesign:HintAssist.Hint="{StaticResource ImportTimeEnd}"
                         Margin="0, 10"
                         SelectedDate="{Binding ImportTimeEnd}"
                         Foreground="{StaticResource Gray1Brush}"
                         BorderBrush="{StaticResource Gray1Brush}"
                         Style="{StaticResource MaterialDesignFloatingHintDatePicker}"
                         CalendarStyle="{StaticResource LiviaCalendar}" />

            <DatePicker Grid.Column="5"
                        materialDesign:HintAssist.Hint="{StaticResource StudyDateStart}"
                        Margin="0, 10"
                        SelectedDate="{Binding StudyDateStart}"
                        Foreground="{StaticResource Gray1Brush}"
                        BorderBrush="{StaticResource Gray1Brush}"
                        Style="{StaticResource MaterialDesignFloatingHintDatePicker}"
                        CalendarStyle="{StaticResource LiviaCalendar}" />
            <TextBlock Grid.Column="6"
                       Foreground="{StaticResource Gray1Brush}"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Style="{StaticResource MaterialDesignBody1TextBlock}"
                       Text="-" />
            <DatePicker  Grid.Column="7"
                         materialDesign:HintAssist.Hint="{StaticResource StudyDateEnd}"
                         Margin="0, 10"
                         SelectedDate="{Binding StudyDateEnd}"
                         Foreground="{StaticResource Gray1Brush}"
                         BorderBrush="{StaticResource Gray1Brush}"
                         Style="{StaticResource MaterialDesignFloatingHintDatePicker}"
                         CalendarStyle="{StaticResource LiviaCalendar}" />
            <UniformGrid Grid.Column="9"
                         Margin="0, 10"
                         Rows="1">
                <Button Click="SearchButtonClick"
                        Style="{StaticResource LiviaPrimaryTextButton}"
                        attachedProperties:StringItemProperties.ItemName="{StaticResource SearchConfirmButtonText}" />
                <Button Click="ClearButtonClick"
                        Style="{StaticResource LiviaDarkTextButton}"
                        attachedProperties:StringItemProperties.ItemName="{StaticResource Clear}" />
            </UniformGrid>
        </Grid>
    </StackPanel>
</UserControl>