Resources/XAML/Confirm.xaml
|
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Style="{StaticResource Page_Style}"> <Grid x:Name="ParentGrid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!--Main Section--> <Grid Margin="30,20,20,20" x:Name="SecondParentGrid"> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--Counter Title--> <!-- Grid containing the Refresh Button --> <Grid x:Name="RefreshButtonGrid" Height="150" Grid.Row="0" Margin="0,0,100,0"> <!-- First Ellipse (Forward1) - Represents the outermost expanding ellipse when the button is clicked --> <!-- Initial height and Width of the Ellipse --> <Ellipse x:Name="EclipseForward1" Height="50" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center"> <!-- Ellipse Fill with a gradient from #ED4264 to #cbad6d --> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#ED4264" Offset="0.0" /> <GradientStop Color="#cbad6d" Offset="1.0" /> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <!-- Second Ellipse (Forward2) - Another expanding ellipse, but starts later than Forward1 --> <Ellipse x:Name="EclipseForward2" Height="50" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#ED4264" Offset="0.0" /> <GradientStop Color="#cbad6d" Offset="1.0" /> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <!-- Third Ellipse (Forward3) - Another expanding ellipse, starts even later --> <Ellipse x:Name="EclipseForward3" Height="50" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#ED4264" Offset="0.0" /> <GradientStop Color="#cbad6d" Offset="1.0" /> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <!-- First Ellipse (Backward1) - Represents the outermost contracting ellipse when the button is unchecked --> <Ellipse x:Name="EclipseBackward1" Height="50" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center"> <!-- Ellipse Fill with a gradient from #ef32d9 to #89fffd --> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#ef32d9" Offset="0.0" /> <GradientStop Color="#89fffd" Offset="1.0" /> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <!-- Second Ellipse (Backward2) - Another contracting ellipse, starts later than Backward1 --> <Ellipse x:Name="EclipseBackward2" Height="50" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#ef32d9" Offset="0.0" /> <GradientStop Color="#89fffd" Offset="1.0" /> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <!-- Third Ellipse (Backward3) - Another contracting ellipse, starts even later --> <Ellipse x:Name="EclipseBackward3" Height="50" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#ef32d9" Offset="0.0" /> <GradientStop Color="#89fffd" Offset="1.0" /> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <!-- Refresh Toggle Button - The main button in the center --> <ToggleButton x:Name="RefreshButton" Height="55" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center" > <ToggleButton.Template> <ControlTemplate TargetType="ToggleButton"> <!-- Border around the button with rounded corners --> <Border x:Name="border" Background="Transparent" CornerRadius="30"> <Grid x:Name="RefreshButtonIconImageGrid"> <!-- Button icon image centered inside the button --> <Image x:Name="RefreshIconImage" Source="icon.png" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </Border> <!-- Triggers for visual states (hover, checked) --> <ControlTemplate.Triggers> <!-- Mouse hover trigger --> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" TargetName="border"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#ED4264" Offset="0.0" /> <GradientStop Color="#cbad6d" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> <!-- Button checked trigger --> <Trigger Property="IsChecked" Value="True"> <Setter Property="Background" TargetName="border"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#ED4264" Offset="0.0" /> <GradientStop Color="#cbad6d" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> <!-- MultiTrigger: Hovering while the button is unchecked --> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="True" /> <Condition Property="IsChecked" Value="False" /> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="border"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#ef32d9" Offset="0.0" /> <GradientStop Color="#89fffd" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> </ToggleButton.Template> <!-- Triggers for button actions (Checked, Unchecked) --> <ToggleButton.Triggers> <!-- When the button is checked (clicked) --> <EventTrigger RoutedEvent="ToggleButton.Checked"> <EventTrigger.Actions> <!-- Start the forward expanding animations --> <BeginStoryboard x:Name="Ellipse_Activated"> <Storyboard> <!-- Forward1 Animation (Expanding and fading out) --> <DoubleAnimation BeginTime="00:00:00" Duration="00:00:01.5" From="50" To="150" Storyboard.TargetProperty="(Ellipse.Width)" Storyboard.TargetName="EclipseForward1" RepeatBehavior="Forever" /> <DoubleAnimation BeginTime="00:00:00" Duration="00:00:01.5" From="50" To="150" Storyboard.TargetProperty="(Ellipse.Height)" Storyboard.TargetName="EclipseForward1" RepeatBehavior="Forever" /> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EclipseForward1" From="1.0" To="0.0" BeginTime="00:00:00" Duration="00:00:01.5" RepeatBehavior="Forever" /> <!-- Forward2 Animation (Starts 1 second later) --> <DoubleAnimation BeginTime="00:00:00.5" Duration="00:00:01.5" From="50" To="150" Storyboard.TargetProperty="(Ellipse.Width)" Storyboard.TargetName="EclipseForward2" RepeatBehavior="Forever" /> <DoubleAnimation BeginTime="00:00:00.5" Duration="00:00:01.5" From="50" To="150" Storyboard.TargetProperty="(Ellipse.Height)" Storyboard.TargetName="EclipseForward2" RepeatBehavior="Forever" /> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EclipseForward2" From="1.0" To="0.0" BeginTime="00:00:00.5" Duration="00:00:01.5" RepeatBehavior="Forever" /> <!-- Forward3 Animation (Starts 2 seconds later) --> <DoubleAnimation BeginTime="00:00:01" Duration="00:00:01.5" From="50" To="150" Storyboard.TargetProperty="(Ellipse.Width)" Storyboard.TargetName="EclipseForward3" RepeatBehavior="Forever" /> <DoubleAnimation BeginTime="00:00:01" Duration="00:00:01.5" From="50" To="150" Storyboard.TargetProperty="(Ellipse.Height)" Storyboard.TargetName="EclipseForward3" RepeatBehavior="Forever" /> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EclipseForward3" From="1.0" To="0.0" BeginTime="00:00:01" Duration="00:00:01.5" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <!-- When the button is unchecked --> <EventTrigger RoutedEvent="ToggleButton.Unchecked"> <EventTrigger.Actions> <!-- Stop the forward animation --> <RemoveStoryboard BeginStoryboardName="Ellipse_Activated" /> <!-- Start the backward contracting animations --> <BeginStoryboard x:Name="Ellipse_Deactivated"> <Storyboard> <!-- Backward1 Animation (Contracting and fading in) --> <DoubleAnimation BeginTime="00:00:00" Duration="00:00:01.5" From="150" To="50" Storyboard.TargetProperty="(Ellipse.Width)" Storyboard.TargetName="EclipseBackward1" /> <DoubleAnimation BeginTime="00:00:00" Duration="00:00:01.5" From="150" To="50" Storyboard.TargetProperty="(Ellipse.Height)" Storyboard.TargetName="EclipseBackward1" /> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EclipseBackward1" From="0.0" To="1.0" BeginTime="00:00:00" Duration="00:00:01.5" /> <!-- Backward2 Animation (Starts 1 second later) --> <DoubleAnimation BeginTime="00:00:00" Duration="00:00:01" From="125" To="50" Storyboard.TargetProperty="(Ellipse.Width)" Storyboard.TargetName="EclipseBackward2" /> <DoubleAnimation BeginTime="00:00:00" Duration="00:00:01" From="125" To="50" Storyboard.TargetProperty="(Ellipse.Height)" Storyboard.TargetName="EclipseBackward2" /> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EclipseBackward2" From="0.0" To="1.0" BeginTime="00:00:00" Duration="00:00:01" /> <!-- Backward3 Animation (Starts 2 seconds later) --> <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" From="100" To="50" Storyboard.TargetProperty="(Ellipse.Width)" Storyboard.TargetName="EclipseBackward3" /> <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" From="100" To="50" Storyboard.TargetProperty="(Ellipse.Height)" Storyboard.TargetName="EclipseBackward3" /> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EclipseBackward3" From="0.0" To="1.0" BeginTime="00:00:00" Duration="00:00:00.5" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </ToggleButton.Triggers> </ToggleButton> </Grid> <!--End of Refresh Button Grid--> <StackPanel Orientation="Vertical" VerticalAlignment="Center" Grid.Row="0" HorizontalAlignment="Right"> <Label Content="Optional: Select Categories to Verify" Style="{StaticResource ModernLabelStyle}" VerticalAlignment="Top" Margin="50,0,50,10"/> <!-- Compliance Categories Selection ComboBox --> <ComboBox x:Name="ComplianceCategoriesSelectionComboBox" Width="200" Margin="50,0,50,0" VerticalAlignment="Bottom" Style="{StaticResource ModernComboBoxStyle}" ItemContainerStyle="{StaticResource ModernComboBoxItemStyle}" ></ComboBox> </StackPanel> <TextBlock x:Name="TotalCountTextBlock" Grid.Row="1" FontSize="18" FontWeight="SemiBold" Foreground="#121518" HorizontalAlignment="Left" VerticalAlignment="Center"/> <TextBlock Text="Filter by" Grid.Row="1" FontSize="13" FontWeight="SemiBold" Margin="0 0 215 0" Foreground="#121518" HorizontalAlignment="Right" VerticalAlignment="Center"/> <!--Filter Textbox--> <Grid Width="200" HorizontalAlignment="Right" Grid.Row="1"> <TextBlock Margin="15 0" VerticalAlignment="Center" Foreground="#B0B9C6" IsHitTestVisible="False" Panel.ZIndex="1" Visibility="{Binding ElementName=textBoxFilter, Path=Text.IsEmpty}" /> <TextBox Name="textBoxFilter" Style="{StaticResource filterTextBox}" /> </Grid> <!--Toggle buttons and textblocks rows--> <StackPanel Orientation="Horizontal" Grid.Row="2" Margin="0,0,0,20"> <StackPanel Orientation="Horizontal" Margin="0,0,40,0"> <TextBlock x:Name="CompliantItemsTextBlock" Text="Compliant Items" FontSize="15" FontWeight="SemiBold" Foreground="#121518" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,10,0" /> <ToggleButton x:Name="CompliantItemsToggleButton" VerticalAlignment="Center" HorizontalAlignment="Center" Width="75" Height="27.5" Template="{DynamicResource ConfirmationPageToggleButtonStyle}"/> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,30,0"> <!-- Add some margin to the right --> <TextBlock x:Name="NonCompliantItemsTextBlock" Text="Non-Compliant Items" FontSize="15" FontWeight="SemiBold" Foreground="#121518" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0"/> <ToggleButton x:Name="NonCompliantItemsToggleButton" VerticalAlignment="Center" HorizontalAlignment="Center" Width="75" Height="27.5" Template="{DynamicResource ConfirmationPageToggleButtonStyle}"/> </StackPanel> <TextBlock x:Name="TotalCurrentlyDisplayedSecOps" FontSize="15" FontWeight="SemiBold" Foreground="#121518" HorizontalAlignment="Right" VerticalAlignment="Center"/> </StackPanel> <!--SecOps Data Grid--> <DataGrid Grid.Row="3" AutoGenerateColumns="False" RowStyle="{DynamicResource ConfirmationDataGridStyleOfRow}" ColumnHeaderStyle="{DynamicResource DataGridColumnHeaderStyle1}" CellStyle="{DynamicResource DataGridCellStyle1}" x:Name="SecOpsDataGrid" Style="{DynamicResource ConfirmationDataGridStyle}"> <!-- DataGrid Columns Definitions --> <DataGrid.Columns> <DataGridTextColumn Header="Friendly Name" Binding="{Binding FriendlyName}" IsReadOnly="True" Width="3*" /> <!-- Column to Display Character Images based on Compliance --> <DataGridTemplateColumn Header="Compliant" IsReadOnly="True" Width="*"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding CharacterImage}" Width="32" Height="32" HorizontalAlignment="Left" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <!-- <StackPanel Orientation="Horizontal"><Border Width="25" Height="25" CornerRadius="50" Margin="0 0 10 0" Background="{Binding BgColor}"><Image Source="{Binding CharacterImage}" Width="20" Height="20" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><TextBlock Text="{Binding FriendlyName}" VerticalAlignment="Center"/></StackPanel> --> <!-- Column to Display Category with Background Color --> <DataGridTextColumn Header="Category" Binding="{Binding Category}" IsReadOnly="True" Width="2*"> <DataGridTextColumn.ElementStyle> <Style TargetType="TextBlock"> <Setter Property="Background" Value="{Binding BgColor}" /> </Style> </DataGridTextColumn.ElementStyle> </DataGridTextColumn> <!-- Other Columns --> <DataGridTextColumn Header="Method" Binding="{Binding Method}" IsReadOnly="True" Width="*" /> <DataGridTextColumn Header="Value" Binding="{Binding Value}" IsReadOnly="True" Width="3*" /> <!-- takes too much unnecessary space --> <!-- <DataGridTextColumn Header="Name" Binding="{Binding Name}" IsReadOnly="True" Width="*" /> --> </DataGrid.Columns> </DataGrid> </Grid> </Grid> </UserControl> |