Forums | NoesisGUI

<UserControl x:Class="ForsightAssistantScreens.NS_ServiceSettingsScreen.Views.cServiceSettingsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             x:Name="RootUserControl"
             Background="Transparent"
             FontFamily="/SharedFonts;component/CommonFonts/#Mont"
             FontWeight="Bold">

    <UserControl.Resources>
        <BitmapImage x:Key="ArrowDown" UriSource="/ScreenResources_ServiceSettings;component/drop_arrow.png"/>

        <!-- Define the gradient background from color1 to color2 -->
        <LinearGradientBrush x:Key="BlueToPurpleBackground" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="#684082" Offset="0.1875"/>
            <GradientStop Color="#2E1752" Offset="0.8906"/>
            <GradientStop Color="#19072B" Offset="1.0"/>
        </LinearGradientBrush>

        <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#44A7F7"/>
        <SolidColorBrush x:Key="PrimaryBackgroundOverBrush" Color="#64C7F7"/>

        <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
            <Border x:Name="Bd" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource PrimaryBackgroundOverBrush}" TargetName="Bd"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="{StaticResource PrimaryBackgroundBrush}"/>
            <Setter Property="Template" Value="{StaticResource ButtonTemplate}"/>
        </Style>

        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Background" Value="{StaticResource PrimaryBackgroundBrush}"/>
        </Style>

        <Style x:Key="ArrowImageStyle" TargetType="Image">
            <Setter Property="Width" Value="46"/>
            <Setter Property="Height" Value="42"/>
            <Setter Property="Margin" Value="378.33,25.79,0,0"/>
        </Style>

        <!-- Brushes -->
        <SolidColorBrush x:Key="SoftPink" Color="#E5C6F9"/>
        <SolidColorBrush x:Key="WhiteBrush" Color="#FFFFFF"/>
        <SolidColorBrush x:Key="AccentBrush" Color="#42145C"/>
        <SolidColorBrush x:Key="TransparentWhite" Color="#9F83B9" Opacity="0.95"/>

        <!-- ComboBox Item style -->
        <Style TargetType="ComboBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBoxItem">
                        <Border Background="Transparent" Padding="10,4">
                            <TextBlock Text="{TemplateBinding Content}" Margin="20"
                                       HorizontalAlignment="Stretch"
                                       VerticalAlignment="Center"
                                       Foreground="{StaticResource AccentBrush}"
                                       FontSize="28"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- ComboBox toggle button style -->
        <Style x:Key="CustomComboBoxToggleButtonStyle" TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Canvas Width="445" Height="96">
                            <!-- Main purple rectangle -->
                            <Rectangle Fill="{StaticResource SoftPink}" Width="445" Height="83" Opacity="0.6"/>
                            <!-- White rectangle on top -->
                            <Rectangle Fill="{StaticResource WhiteBrush}" Width="435" Height="83" Canvas.Left="10" Canvas.Top="13" Opacity="0.4"/>
                            <!-- SERVICE text -->
                            <TextBlock Text="SERVICE" Foreground="{StaticResource AccentBrush}" Width="330" Height="50" FontSize="40" Margin="32,22" />
                            <!-- Arrow using a Path -->
                            <Image Source="{StaticResource ArrowDown}" Style="{StaticResource ArrowImageStyle}"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- ComboBox style -->
        <Style TargetType="ComboBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <ToggleButton x:Name="DropDownToggle" Style="{StaticResource CustomComboBoxToggleButtonStyle}"
                                          IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Popup IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                   Placement="Bottom"
                                   AllowsTransparency="True"
                                   VerticalOffset="-10"
                                   PopupAnimation="Slide"
                                   HasDropShadow="False"
                                   Opacity="0.5">

                                <Border Background="{StaticResource TransparentWhite}"
                                        BorderBrush="{StaticResource TransparentWhite}"
                                        Width="{Binding ActualWidth, ElementName=DropDownToggle}" Padding="7">
                                    <ItemsPresenter/>
                                </Border>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- ComboBox item style -->
        <Style x:Key="ComboBoxTextStyle" TargetType="TextBlock">
            <Setter Property="Width" Value="285"/>
            <Setter Property="Height" Value="31"/>
            <Setter Property="FontFamily" Value="/ScreenFonts_AugSettings;component/#Mont"/>
            <Setter Property="FontWeight" Value="Regular"/>
            <Setter Property="FontSize" Value="24"/>
            <Setter Property="Foreground" Value="{StaticResource SoftPink}"/>
            <Setter Property="Margin" Value="128,0,0,0"/>
        </Style>
        <!-- Background color -->
        <LinearGradientBrush x:Key="WindowBackgroundBrush" StartPoint="1,0" EndPoint="0, 1">
            <GradientStop Color="#684082" Offset="0.1875"/>
            <GradientStop Color="#2E1752" Offset="0.8906"/>
            <GradientStop Color="#19072B" Offset="1.0"/>
        </LinearGradientBrush>
        <!-- ComboBox toggle button control template -->
        <ControlTemplate x:Key="CustomComboBoxToggleButtonTemplate" TargetType="ToggleButton">
            <Canvas Width="445" Height="96">
                <!-- Main purple rectangle -->
                <Rectangle Fill="{StaticResource SoftPink}" Width="445" Height="83" Opacity="0.6"/>
                <!-- White rectangle on top -->
                <Rectangle Fill="{StaticResource WhiteBrush}" Width="435" Height="83" Canvas.Left="10" Canvas.Top="13" Opacity="0.4"/>
                <!-- AUGMENTATION text -->
                <TextBlock Text="AUGMENTATION" Foreground="{StaticResource AccentBrush}" Width="330" Height="50" FontSize="40" Margin="32,22" />
                <!-- Arrow using a Path -->
                <Image Source="{StaticResource ArrowDown}" Style="{StaticResource ArrowImageStyle}"/>
            </Canvas>
        </ControlTemplate>
        <!-- ComboBox style -->
        <Style x:Key="CustomComboBoxStyle" TargetType="ComboBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <ToggleButton Name="ToggleButton"
                                          Template="{StaticResource CustomComboBoxToggleButtonTemplate}"
                                          Grid.Column="2"
                                          Focusable="false"
                                          IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                          ClickMode="Press"/>
                            <ContentPresenter Name="ContentSite"
                                              IsHitTestVisible="False"
                                              Content="{TemplateBinding SelectionBoxItem}"
                                              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                              Margin="3,3,23,3"
                                              VerticalAlignment="Center"
                                              HorizontalAlignment="Left"/>
                            <Popup Name="Popup"
                                   Placement="Bottom"
                                   IsOpen="{TemplateBinding IsDropDownOpen}"
                                   AllowsTransparency="True"
                                   Focusable="False"
                                   PopupAnimation="Slide">
                                <Grid Name="DropDown"
                                      SnapsToDevicePixels="True"
                                      MinWidth="{TemplateBinding ActualWidth}"
                                      MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                    <Border x:Name="DropDownBorder"
                                            Background="{StaticResource WhiteBrush}"/>
                                    <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
                                    </ScrollViewer>
                                </Grid>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    </UserControl.Resources>

    <Grid Background="{StaticResource BlueToPurpleBackground}">
        <Grid Panel.ZIndex="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition Width="40"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

<!--            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/> &lt;!&ndash; For ComboBox &ndash;&gt;
            </Grid.RowDefinitions>-->

            <ComboBox Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="1" Width="445" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" >
                <ComboBoxItem Content="ROBOTIC SYSTEM" Style="{StaticResource ComboBoxItem}"/>
                <ComboBoxItem Content="MICROSCOPE" Style="{StaticResource ComboBoxItem}"/>
                <ComboBoxItem Content="AUGMENTATION" Style="{StaticResource ComboBoxItem}"/>
            </ComboBox>
        </Grid>
    </Grid>
</UserControl>