example

<UserControl x:Class="TV_MeshCreator.UserControls.UCClipProcessing"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:converters="clr-namespace:TV_MeshCreator.Converters"
             xmlns:local="clr-namespace:TV_MeshCreator.UserControls.CircleProgressBar"
             xmlns:res="clr-namespace:TV_MeshCreator.Properties"
             xmlns:vm="clr-namespace:TV_MeshCreatorEngine.Model.Binding;assembly=TV_MeshCreatorEngine"
             Background="WhiteSmoke"
             mc:Ignorable="d" 
             d:DesignHeight="800" d:DesignWidth="1000">

    <UserControl.DataContext>
        <vm:UCClipProcessingModel/>
    </UserControl.DataContext>

    <UserControl.Resources>
        <converters:RowToIndexConverter x:Key="rowToIndexConverter" />
    </UserControl.Resources>

    <Grid>
        <ScrollViewer
        x:Name="Sv_clip_processing_main_configuration">
            <StackPanel HorizontalAlignment="Stretch" 
                    VerticalAlignment="Stretch" >

                <GroupBox Header="{x:Static res:Resources.main_configuration}" 
                      HorizontalAlignment="Stretch"
                      Height="Auto">

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="90*"/>
                            <ColumnDefinition Width="10*"/>
                        </Grid.ColumnDefinitions>

                        <DataGrid ItemsSource="{Binding Path=GridItems}"
                                  HorizontalGridLinesBrush="Gray"
                                  RowHeaderWidth="0"
                              SelectionMode="Extended"
                              PreviewMouseWheel="Dg_PreviewMouseWheel"
                              SelectionUnit="FullRow"
                              ScrollViewer.ScrollChanged="Dg_ScrollChanged"
                                  CanUserReorderColumns="False"
                                  CanUserDeleteRows="False"
                                  CanUserResizeRows="False"
                                  CanUserSortColumns="False"
                                  VerticalGridLinesBrush="LightGray"
                                  x:Name="Dg_main_configuration"
                                  CanUserResizeColumns="False"
                                      AlternatingRowBackground="LightYellow"
                                      CanUserAddRows="False"
                                      MinHeight="350"
                                      MaxHeight="350"
                                  EnableRowVirtualization="False"
                                      Grid.Column="0"
                                      AutoGenerateColumns="False">
                            <DataGrid.Columns>

                                <DataGridTextColumn 
                                    Header="{x:Static res:Resources.order_num_sing}"
                                    Width="30">

                                    <DataGridTextColumn.Binding>
                                        <MultiBinding Converter="{StaticResource rowToIndexConverter}">
                                            <Binding Mode="OneWay" RelativeSource="{RelativeSource AncestorType={x:Type DataGridRow}}"/>
                                            <Binding Mode="OneWay" RelativeSource="{RelativeSource AncestorType={x:Type DataGrid}}" Path="Items.Count"/>
                                        </MultiBinding>
                                    </DataGridTextColumn.Binding>

                                    <DataGridTextColumn.ElementStyle>
                                        <Style TargetType="TextBlock">
                                            <Setter Property="HorizontalAlignment" Value="Center" />
                                            <Setter Property="VerticalAlignment" Value="Center" />
                                        </Style>
                                    </DataGridTextColumn.ElementStyle>
                                </DataGridTextColumn>

                                <DataGridTemplateColumn Header="{x:Static res:Resources.path_to_clip_folder}"
                                                    Width="*">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <TextBlock 
                                            TextTrimming="CharacterEllipsis"
                                            Margin="4"
                                                   ToolTip="{x:Static res:Resources.tooltip_path_to_clip_folder}"
                                     
                                    Text="{Binding Path=ClipFolder}"/>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>

                                <DataGridTemplateColumn Header="{x:Static res:Resources.geo_calib_folder}"
                                    MinWidth="200">
                                    <!--<DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Path=SelectedGeoCalibrationFolder}" />
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>-->
                                    <!--<DataGridTemplateColumn.CellEditingTemplate>-->
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <ComboBox x:Name="Cb_geometry_calibration"
                                                  ToolTip="{x:Static res:Resources.tooltip_chosen_geometry_calibration_folder}"
                                                  PreviewMouseWheel="Cb_PreviewMouseWheel"
                                                      SelectionChanged="Cb_geometry_calibration_SelectionChanged"
                                                      ItemsSource="{Binding Path=GeoCalibrationFolders}"
                                                      SelectedItem="{Binding Path=SelectedGeoCalibrationFolder}"
>
                                                <ComboBox.ItemTemplate>
                                                    <DataTemplate>
                                                        <TextBlock 
                                                        Text="{Binding Path=UIRepresentation}" />
                                                    </DataTemplate>
                                                </ComboBox.ItemTemplate>

                                                <ComboBox.Style>
                                                    <Style TargetType="ComboBox">
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding IsGeoCalibFolderBold}" 
                                                                         Value="True">
                                                                <Setter Property="FontWeight" Value="Bold"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </ComboBox.Style>

                                                <ComboBox.ItemContainerStyle>
                                                    <Style TargetType="ComboBoxItem">
                                                        <Setter Property="FontWeight" Value="Normal"/>
                                                    </Style>
                                                </ComboBox.ItemContainerStyle>
                                            </ComboBox>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>

                                <DataGridTemplateColumn Header="{x:Static res:Resources.color_calib_folder}"
                                                        MinWidth="200">
                                    <!--<DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Path=SelectedColorCalibrationFolder}" />
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>-->
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <ComboBox 
                                                x:Name="Cb_color_calibration"
                                            ToolTip="{x:Static res:Resources.tooltip_chosen_color_calibration_folder}"
                                            PreviewMouseWheel="Cb_PreviewMouseWheel"
                                                SelectionChanged="Cb_color_calibration_SelectionChanged"
                                                ItemsSource="{Binding Path=ColorCalibrationFolders}"
                                                      SelectedItem="{Binding Path=SelectedColorCalibrationFolder}">
                                                <ComboBox.ItemTemplate>
                                                    <DataTemplate>
                                                        <TextBlock Text="{Binding Path=UIRepresentation}" />
                                                    </DataTemplate>
                                                </ComboBox.ItemTemplate>

                                                <ComboBox.Style>
                                                    <Style TargetType="ComboBox">
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding IsColorCalibFolderBold}" 
                                                                         Value="True">
                                                                <Setter Property="FontWeight" Value="Bold"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </ComboBox.Style>

                                                <ComboBox.ItemContainerStyle>
                                                    <Style TargetType="ComboBoxItem">
                                                        <Setter Property="FontWeight" Value="Normal"/>
                                                    </Style>
                                                </ComboBox.ItemContainerStyle>
                                            </ComboBox>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>

                                <DataGridTemplateColumn Header="{x:Static res:Resources.first_clip_frame}"
                                                        MinWidth="150">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <Grid>

                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="90*"/>
                                                    <ColumnDefinition Width="5*"/>
                                                    <ColumnDefinition Width="5*"/>
                                                </Grid.ColumnDefinitions>

                                                <TextBox x:Name="Tb_first_clip_frame"
                                                        Grid.Column="0"
                                                     ToolTip="{x:Static res:Resources.tooltip_chosen_first_clip_frame}"
                                                         GotFocus="Tb_first_clip_frame_GotFocus"
                                                         LostFocus="Tb_first_clip_frame_LostFocus"
                                                        Text="{Binding Path=FirstClipFrame, UpdateSourceTrigger=PropertyChanged}"
                                                        Margin="5,5,0,5" 
                                                        HorizontalAlignment="Stretch" >
                                                    <TextBox.Style>
                                                        <Style TargetType="TextBox">
                                                            <Setter Property="FontWeight" Value="Bold" />
                                                            <Style.Triggers>
                                                                <Trigger Property="Text" Value="default">
                                                                    <Setter Property="FontWeight" Value="Normal" />
                                                                </Trigger>
                                                            </Style.Triggers>
                                                        </Style>
                                                    </TextBox.Style>
                                                </TextBox>

                                                <Button x:Name="Btn_first_clip_frame_cmdUp" 
                                Grid.Column="1"
                                Cursor="Hand"
                                Margin="1,4,1,4" 
                                Content="˄" 
                                HorizontalAlignment="Stretch"
                                Click="Btn_first_clip_frame_cmdUp_Click"/>

                                                <Button x:Name="Btn_first_clip_frame_cmdDown" 
                                Grid.Column="2"
                                Cursor="Hand"
                                Margin="1,4,1,4" 
                                Content="˅" 
                                HorizontalAlignment="Stretch"
                                Click="Btn_first_clip_frame_cmdDown_Click" />
                                            </Grid>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>

                                <DataGridTemplateColumn Header="{x:Static res:Resources.last_clip_frame}"
                                                        MinWidth="150">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <Grid>

                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="90*"/>
                                                    <ColumnDefinition Width="5*"/>
                                                    <ColumnDefinition Width="5*"/>
                                                </Grid.ColumnDefinitions>

                                                <TextBox x:Name="Tb_last_clip_frame"
                                                        Grid.Column="0"
                                                     ToolTip="{x:Static res:Resources.tooltip_chosen_last_clip_frame}"
                                                         GotFocus="Tb_last_clip_frame_GotFocus"
                                                         LostFocus="Tb_last_clip_frame_LostFocus"
                                                        Text="{Binding Path=LastClipFrame, UpdateSourceTrigger=PropertyChanged}"
                                                        Margin="5,5,0,5" 
                                                        HorizontalAlignment="Stretch" >
                                                    <TextBox.Style>
                                                        <Style TargetType="TextBox">
                                                            <Setter Property="FontWeight" Value="Bold" />
                                                            <Style.Triggers>
                                                                <Trigger Property="Text" Value="default">
                                                                    <Setter Property="FontWeight" Value="Normal" />
                                                                </Trigger>
                                                            </Style.Triggers>
                                                        </Style>
                                                    </TextBox.Style>
                                                </TextBox>

                                                <Button x:Name="Btn_last_clip_frame_cmdUp" 
                                Grid.Column="1"
                                Cursor="Hand"
                                Margin="1,4,1,4" 
                                Content="{x:Static res:Resources.arrow_up}" 
                                HorizontalAlignment="Stretch"
                                Click="Btn_last_clip_frame_cmdUp_Click"/>

                                                <Button x:Name="Btn_last_clip_frame_cmdDown" 
                                Grid.Column="2"
                                Cursor="Hand"
                                Margin="1,4,1,4" 
                                Content="{x:Static res:Resources.arrow_down}" 
                                HorizontalAlignment="Stretch"
                                Click="Btn_last_clip_frame_cmdDown_Click" />
                                            </Grid>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>
                            </DataGrid.Columns>
                        </DataGrid>

                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>

                            <StackPanel HorizontalAlignment="Stretch"
                                    Grid.Row="0"
                                VerticalAlignment="Stretch"
                                    Orientation="Vertical">

                                <Button Grid.Row="0"
                                    ToolTip="{x:Static res:Resources.tooltip_add_clip_s_for_processing}"
                                    x:Name="Btn_path_to_clip_folder"
                                    Click="Btn_path_to_clip_folder_Click"
                                    Content="{x:Static res:Resources.add_dots}"
                                    Cursor="Hand"
                                    Margin="4"
                                    HorizontalAlignment="Stretch"/>

                                <Button Grid.Row="1"
                                    Cursor="Hand"
                            Content="{x:Static res:Resources.remove}"
                                    ToolTip="{x:Static res:Resources.tooltip_remove_clip_s_from_list}"
                                    x:Name="Btn_remove_item"
                                    Click="Btn_remove_item_Click"
                            Margin="4, 4, 4, 4"
                            HorizontalAlignment="Stretch"/>
                            </StackPanel>

                            <Button Grid.Row="1"
                                    x:Name="Btn_reset"
                                    Click="Btn_reset_Click"
                                    Cursor="Hand"
                                    Content="{x:Static res:Resources.refresh}"
                                    Margin="4, 4, 4, 4"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"/>
                        </Grid>
                    </Grid>
                </GroupBox>

                <GroupBox Header="{x:Static res:Resources.save_processed_clip_to}" 
                      HorizontalAlignment="Stretch"
                      Height="Auto">

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="95*"/>
                            <ColumnDefinition Width="5*"/>
                        </Grid.ColumnDefinitions>

                        <TextBox HorizontalAlignment="Stretch" 
                             x:Name="Tb_path_to_save_processed_clip_folder"
                             Grid.Column="0"
                                 TextChanged="Tb_path_to_save_processed_clip_folder_TextChanged"
                             Margin="4, 4, 4, 4"
                             TextWrapping="Wrap" />

                        <Button Grid.Column="1"
                                Cursor="Hand"
                            ToolTip="{x:Static res:Resources.tooltip_chose_where_to_save_result_of_process}"
                            x:Name="Btn_path_to_save_processed_clip_folder"
                                Click="Btn_path_to_save_processed_clip_folder_Click"
                            Content="{x:Static res:Resources.dots}"
                            Margin="4, 4, 4, 4"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"/>
                    </Grid>
                </GroupBox>

                <GroupBox
                Header="{x:Static res:Resources.define_clip_type}" 
                HorizontalAlignment="Stretch"
                ToolTip="{x:Static res:Resources.tooltip_clip_type}"
                Height="Auto">
                    <ComboBox 
                        x:Name="Cb_clip_type"
                        SelectionChanged="Cb_clip_type_SelectionChanged"
                        Cursor="Hand"/>
                </GroupBox>

                <Label Content="Optional settings :"
                   Margin="0, 8, 0, 0"/>

                <GroupBox
                Header="{x:Static res:Resources.decimation}"
                HorizontalAlignment="Stretch"
                Height="Auto">

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*"/>
                            <RowDefinition Height="1*"/>
                        </Grid.RowDefinitions>

                        <CheckBox
                        ToolTip="{x:Static res:Resources.tooltip_check_it_if_you_need_to_chose_decemation_level}"
                        Grid.Row="0"
                        x:Name="Cb_perform_decimation"
                            Click="Cb_perform_decimation_Click"
                        Content="{x:Static res:Resources.perform_decimation_by_level}"
                        Height="Auto"
                        Margin="4, 4, 4, 4"
                        HorizontalAlignment="Left"
                        IsChecked="True"/>

                        <StackPanel
                            x:Name="Sp_decimation_options"
                        Height="Auto"
                        Margin="8, 0, 0, 0"
                        HorizontalAlignment="Stretch"
                        Grid.Row="1"
                        Orientation="Vertical">
                            <RadioButton
                                Click="Rb_decimation_PC_Click"
                            x:Name="Rb_decimation_PC"
                            Margin="4, 4, 4, 4"
                            Content="{x:Static res:Resources.PC}"/>
                            <RadioButton
                                Click="Rb_decimation_PC_reduced_quality_Click"
                            x:Name="Rb_decimation_PC_reduced_quality"
                            Margin="4, 4, 4, 4"
                            Content="{x:Static res:Resources.PC_reduced_quality}"/>
                            <RadioButton
                                Click="Rb_decimation_phone_Click"
                            x:Name="Rb_decimation_phone"
                            Margin="4, 4, 4, 4"
                            IsChecked="True"
                            Content="{x:Static res:Resources.phone}"/>
                            <RadioButton
                                Click="Rb_decimation_phone_reduced_quality_Click"
                            x:Name="Rb_decimation_phone_reduced_quality"
                            Margin="4, 4, 4, 4"
                            Content="{x:Static res:Resources.phone_reduced_quality}"/>
                        </StackPanel>
                    </Grid>
                </GroupBox>

                <GroupBox Header="{x:Static res:Resources.number_of_people_in_scene}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*"/>
                            <ColumnDefinition Width="1*"/>
                        </Grid.ColumnDefinitions>

                        <Grid
                        Margin="0, 0, 8, 0"
                        Grid.Column="0">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="90*"/>
                                <ColumnDefinition Width="5*"/>
                                <ColumnDefinition Width="5*"/>
                            </Grid.ColumnDefinitions>

                            <TextBox x:Name="Tb_num_of_people_on_scene"
                                 Grid.Column="0"
                                 ToolTip="{x:Static res:Resources.tooltip_chose_how_many_people_on_the_scene}"
                                 x:FieldModifier="private" 
                                 Margin="5,5,0,5" 
                                 HorizontalAlignment="Stretch" 
                                 TextChanged="Tb_num_of_people_on_scene_TextChanged" />

                            <Button x:Name="Btn_num_of_people_on_scene_cmdUp" 
                                Grid.Column="1"
                                Cursor="Hand"
                                x:FieldModifier="private" 
                                Margin="4,4,4,4" 
                                Content="{x:Static res:Resources.arrow_up}" 
                                HorizontalAlignment="Stretch"
                                Click="Btn_num_of_people_on_scene_cmdUp_Click" />

                            <Button x:Name="Btn_num_of_people_on_scene_cmdDown" 
                                Grid.Column="2"
                                Cursor="Hand"
                                x:FieldModifier="private" 
                                Margin="4,4,4,4" 
                                Content="{x:Static res:Resources.arrow_down}" 
                                HorizontalAlignment="Stretch"
                                Click="Btn_num_of_people_on_scene_cmdDown_Click" />
                        </Grid>
                    </Grid>
                </GroupBox>

                <GroupBox
                    Header="{x:Static res:Resources.additions}">
                    <StackPanel
                        x:Name="Sp_additions"
                        Orientation="Vertical"
                        HorizontalAlignment="Stretch">

                    </StackPanel>
                </GroupBox>
            </StackPanel>
        </ScrollViewer>

        <!--This is Progress bar implementation-->
        <Canvas x:Name="PB_clip_processing"
                Visibility="Hidden">
            <Canvas.Background>
                <SolidColorBrush Color="Gray" Opacity="0.25"/>
            </Canvas.Background>

            <Grid Width="{Binding ActualWidth, ElementName=PB_clip_processing}" 
                  Height="{Binding ActualHeight, ElementName=PB_clip_processing}">

                <local:CircleProgressBar
                        Width="32"
                        Height="32"
                        Visibility="Visible"
                        Background="Transparent"
                        Foreground="Green" />

            </Grid>
        </Canvas>
    </Grid>

</UserControl>