Triton160/Triton160UI/Views/IOView.xaml

<UserControl x:Class="Aitex.Triton160.UI.Views.IOView"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="800" d:DesignWidth="1250" Background="#669ACC">
    <UserControl.Resources>
            <BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
            <Style TargetType="{x:Type GroupBox}">
                <Setter Property="BorderBrush" Value="#D5DFE5" />
                <Setter Property="BorderThickness" Value="2" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type GroupBox}">
                            <Grid SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="6" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="6" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="6" />
                                </Grid.RowDefinitions>
                                <Border CornerRadius="4" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent" Background="{TemplateBinding Background}" />
                                <Border Name="Header" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1">
                                    <ContentPresenter ContentSource="Header" RecognizesAccessKey="true" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </Border>
                                <ContentPresenter Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                <Border Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="4"  BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
                                    <Border.OpacityMask>
                                        <MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
                                            <Binding ElementName="Header" Path="ActualWidth" />
                                            <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}" />
                                            <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}" />
                                        </MultiBinding>
                                    </Border.OpacityMask>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    </UserControl.Resources>
    <ScrollViewer>
    <StackPanel Orientation="Vertical" >
        <GroupBox Header="DI" Padding="10" Margin="20">
            <WrapPanel x:Name="diPanel" Orientation="Horizontal"></WrapPanel>
        </GroupBox>

        <GroupBox Header="DO" Padding="10" Margin="20">
            <WrapPanel x:Name="doPanel" Orientation="Horizontal"></WrapPanel>
        </GroupBox>

        <GroupBox Header="AI" Padding="10" Margin="20">
            <WrapPanel x:Name="aiPanel" Orientation="Horizontal"></WrapPanel>
        </GroupBox>

        <GroupBox Header="AO" Padding="10" Margin="20">
            <WrapPanel x:Name="aoPanel" Orientation="Horizontal"></WrapPanel>
        </GroupBox>

    </StackPanel>
    </ScrollViewer>

</UserControl>