PDFOffice_Windows_exe/PDF Office/Views/PropertyPanel/TextEditProperty.xaml

<UserControl x:Class="PDF_Office.Views.PropertyPanel.TextEditProperty"
             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:local="clr-namespace:PDF_Office.Views.PropertyPanel"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True"
             xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:Convert="clr-namespace:PDF_Office.DataConvert"
              xmlns:cusColor="clr-namespace:PDF_Office.CustomControl.CompositeControl"
             xmlns:cus="clr-namespace:PDF_Office.CustomControl"
             xmlns:CompositeControl="clr-namespace:PDF_Office.CustomControl.CompositeControl"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             Loaded="UserControl_Loaded"
             >
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../../Styles/SliderStyle.xaml"></ResourceDictionary>
                <ResourceDictionary Source="../../Styles/CustomBtnStyle.xaml"/>
                <ResourceDictionary Source="../../Styles/RadioButtonStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <Convert:BoolToVisible x:Key="BoolToVisible"/>
            <Convert:InvertBoolToVisibleConvert x:Key="InvertBoolToVisibleConvert"/>
            <Convert:InvertBoolConvert x:Key="InvertBoolConvert"/>
            <ContextMenu x:Key="BtnFlyoutMenu" FontSize="14"
                        >
                <ContextMenu.ItemContainerStyle>
                    <Style TargetType="MenuItem">
                        <Setter Property="Padding" Value="0,7,0,7"/>
                        <Setter Property="VerticalContentAlignment" Value="Center"/>
                    </Style>
                </ContextMenu.ItemContainerStyle>
                <MenuItem Name="ChangeStyleMenuItem"  Header="用所选部分重新定义" IsEnabled="True">
                </MenuItem>
                <MenuItem Name="BackStyleMenuItem"  Header="恢复默认预设样式" IsEnabled="True">
                </MenuItem>
            </ContextMenu>

            <DataTemplate x:Key="FontStyleData">
                <Grid >
                    <TextBlock Text="{Binding mFontStyleName}" Foreground="Black"/>
                </Grid>
            </DataTemplate>

        </ResourceDictionary>
    </UserControl.Resources>
    <Grid Background="#F3F3F3">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Visibility="{Binding IsSelectTextAndImg,Converter={StaticResource InvertBoolToVisibleConvert}}">

            <StackPanel Visibility="{Binding IsTextEdit,Converter={StaticResource BoolToVisible}}">
                <TextBlock Name="AnnotTypeTitle" FontFamily="Segoe UI Semibold" FontWeight="SemiBold" FontSize="18" LineHeight="24" HorizontalAlignment="Left" Margin="10,8,0,0">Freetext</TextBlock>
                <Border Width="228" Height="100" BorderThickness="1" CornerRadius="2" BorderBrush="#DDDDDD" Background="White" Margin="0,8,0,0">
                    <Grid>
                        <Border Name="FreeTextBorder" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="5">
                            <TextBlock Name="SampleText"
                                   Foreground="{Binding SelectColor}" 
                                   FontFamily="{Binding TextFontFamily}"
                                   FontWeight="{Binding TextFontWeights}" 
                                   FontStyle="{Binding TextFontStyle}"
                                   FontSize="{Binding TextFontSize}" 
                                   Text="Sample" HorizontalAlignment="Center" VerticalAlignment="Center">
                            </TextBlock>
                        </Border>

                        <Path Name="UnderlinePath" HorizontalAlignment="Center" StrokeThickness="2" Margin="0,51,0,0" Visibility="Collapsed">
                            <Path.Data>
                                <LineGeometry StartPoint="0,0" EndPoint="62,0"></LineGeometry>
                            </Path.Data>
                        </Path>
                        <Path Name="StrikeoutPath" HorizontalAlignment="Center" StrokeThickness="2" Margin="0,40,0,0" Visibility="Collapsed">
                            <Path.Data>
                                <LineGeometry StartPoint="0,0" EndPoint="62,0"></LineGeometry>
                            </Path.Data>
                        </Path>
                        <Path Name="SquigglyPath"  HorizontalAlignment="Center" StrokeThickness="2" Margin="0,51,0,0" Visibility="Collapsed">

                        </Path>
                    </Grid>
                </Border>


                <Border BorderBrush="#E2E3E6"  Height="32" Margin="12,0,4,0"  BorderThickness="0">
                    <StackPanel Orientation="Horizontal">
                        <ComboBox IsReadOnly="True" Name="FontTitleBox" Background="Transparent" Padding="10 10 0 0"  Width="148"   BorderThickness="1" BorderBrush="#FFE2E3E6"
                                ItemsSource="{Binding FontStyleList}"
                              ItemTemplate="{StaticResource FontStyleData}"
                              >
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="SelectionChanged">
                                    <i:InvokeCommandAction Command="{Binding SelectedFontStyleCommand}" CommandParameter="{Binding ElementName=FontTitleBox,Path=SelectedItem}"/>
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </ComboBox>
                        <Button Width="32" Height="32" ContextMenu="{StaticResource BtnFlyoutMenu}"/>
                    </StackPanel>
                </Border>




                <TextBlock x:Name="FontText"  FontFamily="Segoe UI Semibold" FontWeight="SemiBold" FontSize="14" LineHeight="20" Margin="12,18,0,0" >Font</TextBlock>

                <Grid Margin="0,6,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"></ColumnDefinition>
                        <ColumnDefinition Width="auto"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"></RowDefinition>
                        <RowDefinition Height="auto"></RowDefinition>
                        <RowDefinition Height="auto"></RowDefinition>
                    </Grid.RowDefinitions>

                    <Border BorderBrush="#E2E3E6" Grid.ColumnSpan="2"  Width="228" Height="32" Margin="12,0,4,0"  BorderThickness="0">
                        <Grid>
                            <ComboBox IsReadOnly="True" Name="FontFamilyBox" Background="Transparent" Padding="10 10 0 0"  BorderThickness="1" BorderBrush="#FFE2E3E6"
                                >
                                <ComboBox.ItemContainerStyle>
                                    <Style TargetType="{x:Type ComboBoxItem}">
                                        <Setter Property="Padding" Value="10 0 0 0"/>
                                    </Style>
                                </ComboBox.ItemContainerStyle>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">
                                    <TextBlock Text="Courier New" FontFamily="Courier New" Tag="Courier"  FontSize="14"/>
                                </ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">
                                    <TextBlock Text="Arial" FontFamily="Arial" Tag="Helvetica" FontSize="14"/>
                                </ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">
                                    <TextBlock Text="Times New Roman" FontFamily="Times New Roman" Tag="Times Roman" FontSize="14"/>
                                </ComboBoxItem>
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="SelectionChanged">
                                        <i:InvokeCommandAction Command="{Binding FontFamilyChangedCommand}" CommandParameter="{Binding ElementName=FontFamilyBox,Path=SelectedIndex}"/>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </ComboBox>

                            <TextBox Name="FontFamilyText" FontFamily="Segoe UI" FontSize="14" Background="White"  Padding="10 0 0 0" Margin="2,0,25,0" IsReadOnly="True"
                             BorderThickness="0" VerticalAlignment="Center" TextAlignment="Left">
                            </TextBox>
                        </Grid>
                    </Border>

                    <cusColor:ColorSubContent x:Name="FontColorBox" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left"
                                   ></cusColor:ColorSubContent>

                    <Border Grid.Row="1" BorderBrush="#E2E3E6"  Width="148" Height="32" Margin="12,8,4,0"  BorderThickness="0">
                        <Grid>
                            <ComboBox Name="FontStyleBox" IsReadOnly="True" BorderThickness="1" BorderBrush="#FFE2E3E6" Padding="10 10 0 0" Background="Transparent">
                                <ComboBox.ItemContainerStyle>
                                    <Style TargetType="{x:Type ComboBoxItem}">
                                        <Setter Property="Padding" Value="10 0 0 0"/>
                                    </Style>
                                </ComboBox.ItemContainerStyle>
                                <ComboBoxItem x:Name="RegularItem" Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">Regular</ComboBoxItem>
                                <ComboBoxItem x:Name="BoldItem" Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">Bold</ComboBoxItem>
                                <ComboBoxItem x:Name="ItalicItem" Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">Italic</ComboBoxItem>
                                <ComboBoxItem x:Name="BoldItalicItem" Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">Bold Italic</ComboBoxItem>

                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="SelectionChanged">
                                        <i:InvokeCommandAction Command="{Binding FontStyleChangedCommand}" CommandParameter="{Binding ElementName=FontStyleBox,Path=SelectedItem}"/>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </ComboBox>
                            <TextBox Name="FontStyleText" IsReadOnly="True" FontFamily="Segoe UI" FontSize="14" Background="White" Padding="10 0 0 0" Height="20" Margin="2,0,35,0" 
                             BorderThickness="0" VerticalAlignment="Center" TextAlignment="Left">
                            </TextBox>
                        </Grid>
                    </Border>

                    <Border Grid.Row="1" Grid.Column="1" BorderBrush="#E2E3E6"  Width="80" Height="32" Margin="-1,8,0,0"  BorderThickness="0">
                        <Grid>
                            <ComboBox Name="FontSizeBox" BorderThickness="1" Background="Transparent" BorderBrush="#FFE2E3E6"
                                  MaxDropDownHeight="200">
                                <ComboBox.ItemContainerStyle>
                                    <Style TargetType="{x:Type ComboBoxItem}">
                                        <Setter Property="Padding" Value="10 0 0 0"/>
                                    </Style>
                                </ComboBox.ItemContainerStyle>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">6</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">8</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">9</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">10</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">12</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">14</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">18</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">20</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">22</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">24</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">26</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">28</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">32</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">36</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">48</ComboBoxItem>
                                <ComboBoxItem Height="32" VerticalContentAlignment="Center" Template="{StaticResource comboxitem}">72</ComboBoxItem>
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="SelectionChanged">
                                        <i:InvokeCommandAction Command="{Binding FontSizeChangedCommand}" CommandParameter="{Binding ElementName=FontSizeBox,Path=SelectedItem}"/>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </ComboBox>
                            <TextBox Name="FontSizeText" FontFamily="Segoe UI" FontSize="14" Background="White" Height="20" Padding="10 0 0 0" Margin="2,0,35,0" 
                             BorderThickness="0" VerticalAlignment="Center" TextAlignment="Left" IsReadOnly="True">
                            </TextBox>
                        </Grid>
                    </Border>


                    <Border Grid.ColumnSpan="2" Grid.Row="2" Width="148"  Margin="12,8,0,0"  HorizontalAlignment="Left">
                        <Grid Name="ToolGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>



                            <RadioButton x:Name="TextAlignLeftBtn" IsChecked="True" Tag="AlignLeft" GroupName="TextAlign" Width="32" Height="32" Foreground="#616469"  Background="Transparent" VerticalContentAlignment="Center"
                                      Style="{DynamicResource GreyBgRadioBtnStyle}" >
                                <RadioButton.Content>
                                    <Grid Width="32" Height="32">
                                        <Canvas Margin="5,10,0,0">
                                            <Rectangle Canvas.Top="0.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignLeftBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Top="4.25" Width="8" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignLeftBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Top="12.25" Width="8" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignLeftBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Top="8.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignLeftBtn,Path=Foreground}"/>
                                        </Canvas>
                                    </Grid>
                                </RadioButton.Content>
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Checked">
                                        <i:InvokeCommandAction Command="{Binding TextAlignCheckedCommand}" CommandParameter="{Binding ElementName=TextAlignLeftBtn,Path=Tag}"/>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </RadioButton>

                            <RadioButton x:Name="TextAlignCenterBtn" Grid.Column="1" Tag="AlignCenter" GroupName="TextAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                                      Style="{DynamicResource GreyBgRadioBtnStyle}" >
                                <RadioButton.Content>
                                    <Grid Width="32" Height="32">
                                        <Canvas Margin="5,10,0,0">
                                            <Rectangle Canvas.Top="0.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignCenterBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Left="3" Canvas.Top="4.25" Width="8" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignCenterBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Left="3" Canvas.Top="12.25" Width="8" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignCenterBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Top="8.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignCenterBtn,Path=Foreground}"/>
                                        </Canvas>
                                    </Grid>
                                </RadioButton.Content>
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Checked">
                                        <i:InvokeCommandAction Command="{Binding TextAlignCheckedCommand}" CommandParameter="{Binding ElementName=TextAlignCenterBtn,Path=Tag}"/>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </RadioButton>

                            <RadioButton x:Name="TextAlignRightBtn" Grid.Column="2" Tag="AlignRight" GroupName="TextAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                                      Style="{DynamicResource GreyBgRadioBtnStyle}" >
                                <RadioButton.Content>
                                    <Grid Width="32" Height="32">
                                        <Canvas Margin="5,10,0,0">
                                            <Rectangle Canvas.Top="0.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignRightBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Left="6" Canvas.Top="4.25" Width="8" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignRightBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Left="6" Canvas.Top="12.25" Width="8" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignRightBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Top="8.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignRightBtn,Path=Foreground}"/>
                                        </Canvas>
                                    </Grid>
                                </RadioButton.Content>
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Checked">
                                        <i:InvokeCommandAction Command="{Binding TextAlignCheckedCommand}" CommandParameter="{Binding ElementName=TextAlignRightBtn,Path=Tag}"/>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </RadioButton>

                            <RadioButton x:Name="TextAlignBtn" Grid.Column="3" Tag="Align" GroupName="TextAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                                      Style="{DynamicResource GreyBgRadioBtnStyle}" >
                                <RadioButton.Content>
                                    <Grid Width="32" Height="32">
                                        <Canvas Margin="5,10,0,0">
                                            <Rectangle Canvas.Top="0.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Top="8.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Top="4.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignBtn,Path=Foreground}"/>
                                            <Rectangle Canvas.Top="12.25" Width="14" Height="1.5" StrokeThickness="1.5" Stroke="{Binding ElementName=TextAlignBtn,Path=Foreground}"/>
                                        </Canvas>
                                    </Grid>
                                </RadioButton.Content>
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Checked">
                                        <i:InvokeCommandAction Command="{Binding TextAlignCheckedCommand}" CommandParameter="{Binding ElementName=TextAlignBtn,Path=Tag}"/>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </RadioButton>

                        </Grid>
                    </Border>
                </Grid>

                <TextBlock x:Name="AlignText" FontFamily="Segoe UI Semibold" FontWeight="SemiBold" FontSize="14" LineHeight="20" Margin="12,14,0,0" >Align</TextBlock>
            </StackPanel>

            <StackPanel Visibility="{Binding IsTextEdit,Converter={StaticResource InvertBoolToVisibleConvert}}">
                <TextBlock Name="AnnotTypeTitle1" FontFamily="Segoe UI Semibold" FontWeight="SemiBold" FontSize="18" LineHeight="24" HorizontalAlignment="Left" Margin="10,8,0,0">Image</TextBlock>
                <Border Width="228" Height="100" BorderThickness="1" CornerRadius="2" BorderBrush="#DDDDDD" Background="White" Margin="0,8,0,0">
                    <Grid>
                        <Border Name="FreeTextBorder1" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="5" >
                            <Image x:Name="ImgExmple" Source="{Binding CurrentImg}">
                                <Image.RenderTransform>
                                    <RotateTransform x:Name="test"  Angle="{Binding Angle}"/>
                                </Image.RenderTransform>
                            </Image>
                        </Border>
                    </Grid>
                </Border>
                <StackPanel Orientation="Horizontal" Margin="0,18,0,0" HorizontalAlignment="Center">
                    <Button Margin="0,0,20,0" Content="逆转" Width="32" Height="32"
                         IsEnabled="{Binding IsCrop,Converter={StaticResource InvertBoolConvert}}"
                        Command="{Binding AntiClockwiseCommand}"/>
                    <Button  Content="顺转" Width="32" Height="32" 
                          IsEnabled="{Binding IsCrop,Converter={StaticResource InvertBoolConvert}}"
                         Command="{Binding ClockwiseCommand}"/>
                </StackPanel>

                <CompositeControl:SlidComboControl  IsEnabled="{Binding IsCrop,Converter={StaticResource InvertBoolConvert}}"/>
                <StackPanel Width="228" HorizontalAlignment="Center"  Margin="0,20,0,0">
                    <Grid x:Name="GridCrop">
                        <cus:CustomIconToggleBtn x:Name="BtnCrop" Tag="Crop" BorderBrush="#DFE1E5" BorderThickness="1" Style="{StaticResource ToggleBtnViewModeStyle}" 
                                             Foreground="Black" ContentStringFormat="156" 
                                             Command="{Binding CropModeCommand}"
                                             Visibility="{Binding IsCrop,Converter={StaticResource InvertBoolToVisibleConvert}}"
                                             
                                             >
                            <TextBlock Text="Crop"/>
                        </cus:CustomIconToggleBtn>
                        <Grid Visibility="{Binding IsCrop,Converter={StaticResource BoolToVisible}}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="8"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Button Content="Confirm" Background="#1770F4" Height="32" Command="{Binding CropImgCommand}"/>
                            <Button Grid.Column="2" Content="Cancel" Background="White" BorderBrush="#DFE1E5" BorderThickness="1"
                                Command="{Binding CancelCropCommand}"
                                />
                        </Grid>
                    </Grid>
                    <cus:CustomIconToggleBtn x:Name="BtnReplace"  Margin="0,13,0,0" Tag="Replace" BorderBrush="#DFE1E5" BorderThickness="1" Style="{StaticResource ToggleBtnViewModeStyle}" 
                                         Foreground="Black" ContentStringFormat="156"
                                         IsEnabled="{Binding IsCrop,Converter={StaticResource InvertBoolConvert}}"
                                         Command="{Binding ReplaceImgCommand}"
                                         >
                        <TextBlock Text="Replace"/>
                    </cus:CustomIconToggleBtn>

                    <cus:CustomIconToggleBtn x:Name="BtnExtract" Margin="0,13,0,0" Tag="Extract" BorderBrush="#DFE1E5" BorderThickness="1" Style="{StaticResource ToggleBtnViewModeStyle}" 
                                         Foreground="Black" ContentStringFormat="156"
                                         IsEnabled="{Binding IsCrop,Converter={StaticResource InvertBoolConvert}}"
                                         Command="{Binding ExportImgCommand}"
                                         >
                        <TextBlock Text="Extract"/>
                    </cus:CustomIconToggleBtn>
                </StackPanel>
                <TextBlock x:Name="AlignImg" FontFamily="Segoe UI Semibold" FontWeight="SemiBold" FontSize="14" LineHeight="20" Margin="12,14,0,0" >Align</TextBlock>
            </StackPanel>

        </Grid>

        <StackPanel Visibility="{Binding IsSelectTextAndImg,Converter={StaticResource BoolToVisible}}">
            <TextBlock x:Name="GeneralProperties" FontFamily="Segoe UI Semibold" FontWeight="SemiBold" FontSize="14" LineHeight="20" Margin="12,14,0,0" >General Properties</TextBlock>
            <TextBlock x:Name="AlignTextAndImg" FontFamily="Segoe UI Semibold" FontWeight="SemiBold" FontSize="14" LineHeight="20" Margin="12,14,0,0" >Align</TextBlock>
        </StackPanel>
        
        <Grid x:Name="LayoutAlignGrid" Grid.Row="1" Width="150" HorizontalAlignment="Left" Margin="0,10,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

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

            <RadioButton x:Name="BtnImgLayoutAlignLeft"  Grid.Row="0" Grid.Column="0" Tag="AlignLeft" GroupName="ImgAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                             IsEnabled="{Binding IsLayoutAlign}"       
                             Style="{DynamicResource GreyBgRadioBtnStyle}" >
                <RadioButton.Content>
                    <Path Margin="5,0,0,0" Data="M2.01367 15V1H3.51367V15H2.01367ZM5 4H11V7H5V4ZM14 9H5V12H14V9Z"
                              Fill="{Binding ElementName=BtnImgLayoutAlignLeft,Path=Foreground}"/>
                </RadioButton.Content>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding ImgAlignCheckedCommand}" CommandParameter="{Binding ElementName=BtnImgLayoutAlignLeft,Path=Tag}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </RadioButton>

            <RadioButton x:Name="BtnImgLayoutAlignHorizonCenter"  Grid.Row="0" Grid.Column="1" Tag="AlignHorizonCenter" GroupName="ImgAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                             IsEnabled="{Binding IsLayoutAlign}"           
                             Style="{DynamicResource GreyBgRadioBtnStyle}" >
                <RadioButton.Content>
                    <Path Margin="5,0,0,0" Data="M8.75 7L8.75 9L12 9L12 12L8.75 12L8.75 15L7.25 15L7.25 12L4 12L4 9L7.25 9L7.25 7L2 7L2 4L7.25 4L7.25 0.999999L8.75 1L8.75 4L14 4L14 7L8.75 7Z" 
                            Fill="{Binding ElementName=BtnImgLayoutAlignHorizonCenter,Path=Foreground}"/>
                </RadioButton.Content>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding ImgAlignCheckedCommand}" CommandParameter="{Binding ElementName=BtnImgLayoutAlignHorizonCenter,Path=Tag}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </RadioButton>

            <RadioButton x:Name="BtnImgLayoutAlignRight"  Grid.Row="0" Grid.Column="2" Tag="AlignRight" GroupName="ImgAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                             IsEnabled="{Binding IsLayoutAlign}"            
                             Style="{DynamicResource GreyBgRadioBtnStyle}" >
                <RadioButton.Content>
                    <Path Margin="5,0,0,0" Data="M14 1L14 15L12.5 15L12.5 1L14 1ZM11 12L2 12L2 9L11 9L11 12ZM4 7L11 7L11 4L4 4L4 7Z" 
                               Fill="{Binding ElementName=BtnImgLayoutAlignRight,Path=Foreground}"/>
                </RadioButton.Content>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding ImgAlignCheckedCommand}" CommandParameter="{Binding ElementName=BtnImgLayoutAlignRight,Path=Tag}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </RadioButton>

            <RadioButton x:Name="BtnImgLayoutAlignDistributeHorizontal"  Grid.Row="0" Grid.Column="3" Tag="DistributeHorizontal" GroupName="ImgAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                             IsEnabled="{Binding IsLayoutAvgAlign}"         
                             Style="{DynamicResource GreyBgRadioBtnStyle}" >
                <RadioButton.Content>
                    <Path Margin="5,0,0,0" Data="M15 12.5L1 12.5L1 14L15 14L15 12.5ZM12 9.5L4 9.5L4 6.5L12 6.5L12 9.5ZM1 2L15 2L15 3.5L1 3.5L1 2Z" 
                              Fill="{Binding ElementName=BtnImgLayoutAlignDistributeHorizontal,Path=Foreground}"/>
                </RadioButton.Content>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding ImgAlignCheckedCommand}" CommandParameter="{Binding ElementName=BtnImgLayoutAlignDistributeHorizontal,Path=Tag}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </RadioButton>

            <RadioButton x:Name="BtnImgLayoutAlignTop"  Grid.Row="1" Grid.Column="0" Tag="AlignTop" GroupName="ImgAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                             IsEnabled="{Binding IsLayoutAlign}"           
                             Style="{DynamicResource GreyBgRadioBtnStyle}" >
                <RadioButton.Content>
                    <Path Margin="5,0,0,0" Data="M15 2L1 2L1 3.5L15 3.5L15 2ZM12 5L12 11L9 11L9 5L12 5ZM7 5L7 14L4 14L4 5L7 5Z"
                              Fill="{Binding ElementName=BtnImgLayoutAlignTop,Path=Foreground}"/>
                </RadioButton.Content>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding ImgAlignCheckedCommand}" CommandParameter="{Binding ElementName=BtnImgLayoutAlignTop,Path=Tag}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </RadioButton>

            <RadioButton x:Name="BtnImgLayoutAlignVerticalCenter"  Grid.Row="1" Grid.Column="1" Tag="AlignVerticalCenter" GroupName="ImgAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                             IsEnabled="{Binding IsLayoutAlign}"           
                             Style="{DynamicResource GreyBgRadioBtnStyle}" >
                <RadioButton.Content>
                    <Path Margin="5,0,0,0" Data="M7 7.25L9 7.25L9 4L12 4L12 7.25L15 7.25L15 8.75L12 8.75L12 12L9 12L9 8.75L7 8.75L7 14L4 14L4 8.75L1 8.75L1 7.25L4 7.25L4 2L7 2L7 7.25Z" 
                              Fill="{Binding ElementName=BtnImgLayoutAlignVerticalCenter,Path=Foreground}"/>
                </RadioButton.Content>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding ImgAlignCheckedCommand}" CommandParameter="{Binding ElementName=BtnImgLayoutAlignVerticalCenter,Path=Tag}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </RadioButton>

            <RadioButton x:Name="BtnImgLayoutAlignBottom"  Grid.Row="1" Grid.Column="2" Tag="AlignBottom" GroupName="ImgAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"
                             IsEnabled="{Binding IsLayoutAlign}"         
                             Style="{DynamicResource GreyBgRadioBtnStyle}" >
                <RadioButton.Content>
                    <Path Margin="5,0,0,0" Data="M9 2H12V11H9V2ZM4 5H7V11H4V5ZM1 14H15V12.5H1V14Z" 
                              Fill="{Binding ElementName=BtnImgLayoutAlignBottom,Path=Foreground}"/>
                </RadioButton.Content>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding ImgAlignCheckedCommand}" CommandParameter="{Binding ElementName=BtnImgLayoutAlignBottom,Path=Tag}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </RadioButton>

            <RadioButton x:Name="BtnImgLayoutDistributeVertical"  Grid.Row="1" Grid.Column="3" Tag="DistributeVertical" GroupName="ImgAlign" Width="32" Height="32" Foreground="#616469" Background="Transparent" VerticalContentAlignment="Center"     
                             IsEnabled="{Binding IsLayoutAvgAlign}"
                             Style="{DynamicResource GreyBgRadioBtnStyle}" >
                <RadioButton.Content>
                    <Path Margin="5,0,0,0" Data="M2 15V1H3.5V15H2ZM6.5 4H9.5V12H6.5V4ZM12.5 1V15H14V1H12.5Z"
                              
                              Fill="{Binding ElementName=BtnImgLayoutDistributeVertical,Path=Foreground}"/>
                </RadioButton.Content>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding ImgAlignCheckedCommand}" CommandParameter="{Binding ElementName=BtnImgLayoutDistributeVertical,Path=Tag}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </RadioButton>

        </Grid>
    </Grid>
</UserControl>