Gcobani Mkontwana

Gcobani Mkontwana

  • 552
  • 2k
  • 431.6k

How to align and adjust margins in the grid between rectangle in wpf?

Jun 14 2024 12:51 PM

Hi Team

I have a rectangle and in between there is big space in between, want to minimize this space a bit by adjusting the margin of the grid so that it can be pushed a bit closer. How can i achieve such from this below code?

<Grid Background="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,29,0,10" Width="1766">
        <Rectangle HorizontalAlignment="Left" Height="257" Stroke="#FFCFCFD1" VerticalAlignment="Top" Width="260" Margin="14,104,0,0"/>

        <!---Ingredient Totals-->

        <Rectangle  HorizontalAlignment="Left" Height="257" Stroke="#FFCFCFD1" VerticalAlignment="Top" Width="260" Margin="290,104,0,0"/>
        <Label x:Name="lblMacros" FontWeight="SemiBold" Visibility="Visible" Content="Macros:" HorizontalAlignment="Left" VerticalAlignment="Top" Width="124" HorizontalContentAlignment="Right" Background="#FFE3E3E3" Margin="296,137,0,0" BorderThickness="1" BorderBrush="#FFBEBEBE" Height="23" FontSize="10"/>
        <TextBox x:Name="txtMacroTotal" FontSize="10" Foreground="Black" HorizontalAlignment="Left" Visibility="Visible" Height="20" Margin="425,138,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Label x:Name="lblMacroTotal" FontSize="10" FontWeight="SemiBold" Visibility="Visible" Content="Totals:" HorizontalAlignment="Left" VerticalAlignment="Top" Width="125" HorizontalContentAlignment="Right" Background="#FFE3E3E3" Margin="296,163,0,0" BorderThickness="1" BorderBrush="#FFBEBEBE" Height="23"/>
        <TextBox x:Name="txtTotal" Foreground="Black" FontSize="10" HorizontalAlignment="Left" Visibility="Visible" Height="23" Margin="426,163,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="122"/>




        <!--GataGrid name on top-->
        <Label Content="Macros" FontWeight="SemiBold" HorizontalAlignment="Left" HorizontalContentAlignment="Center" VerticalAlignment="Top" Width="780" BorderBrush="#FFBEBEBE" Background="#FFE3E3E3" BorderThickness="1.5" Foreground="Black" Height="35" VerticalContentAlignment="Center" FontSize="14" Margin="14,460,0,0"/>

        <!---Name of the screen on top-->
        <Label Content="Premix-Batch Management" BorderThickness="1.5" BorderBrush="#FF0B0B0B" Background="#FF383838" Foreground="White" FontSize="18" HorizontalContentAlignment="Center" VerticalAlignment="Top" Margin="10,10,0,0" FontWeight="SemiBold" />

        <!--Data Grid columns names-->
        <DataGrid x:Name="dgvMacroRecipe" VerticalScrollBarVisibility="Visible" SelectedCellsChanged="dgvMacroRecipe_SelectedCellsChanged" CellEditEnding="dgvMacroRecipe_CellEditEnding"  VerticalAlignment="Top" HorizontalGridLinesBrush="#FFBBBBBB" AutoGenerateColumns="False" CanUserDeleteRows="False" HeadersVisibility="Column" GridLinesVisibility="Horizontal" FontWeight="Normal" BorderBrush="#FF767676" Margin="12,497,0,0" HorizontalAlignment="Left" FontSize="12" Width="780"  >
            <DataGrid.Resources>
                <Style TargetType="{x:Type DataGridCell}">
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="Blue" />
                            <Setter Property="BorderBrush" Value="Blue"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.Resources>
            <DataGrid.ColumnHeaderStyle>
                <Style TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="FontWeight" Value="SemiBold"/>
                    <Setter Property="TextElement.FontSize" Value="14"/>
                    <Setter Property="Background" Value="#FF383838"/>
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="Height" Value="30"/>
                    <Setter Property="SeparatorVisibility" Value="Visible"/>
                </Style>
            </DataGrid.ColumnHeaderStyle>
            <DataGrid.Columns>
                <DataGridTextColumn  Visibility="Visible" Width="5">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Binding="{Binding idx}" Header="IDX" Width="Auto" IsReadOnly="True" Visibility="Hidden">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Left" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>

                <!--IDX column-->
                <DataGridTextColumn Binding="{Binding idx1}" Header="IDX" Width="Auto" IsReadOnly="True">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Left" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn  Visibility="Visible" Width="5">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>

                <!---RM Code column-->
                <DataGridTextColumn Binding="{Binding RM_Code}" Header="RM Code" Width="Auto" IsReadOnly="True" FontSize="8">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Left" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn  Visibility="Visible" Width="5">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>

                <!---Stock Code column-->
                <DataGridTemplateColumn Header="Stock Code">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock x:Name="txtStockCode"  Text="{Binding [Stock Code]}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <ComboBox Height="22" Width="auto" x:Name="cbxMacroStockType" ItemsSource="{Binding Source={StaticResource StockCode}}" DisplayMemberPath="Code" SelectedValue="Code" SelectedValuePath="idx1" IsSynchronizedWithCurrentItem="True"   DropDownClosed="cbxMacroStockType_DropDownClosed" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn  Visibility="Visible" Width="5">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>

                <!---Stock Description column-->
                <DataGridTextColumn Binding="{Binding [Stock Description]}" Header="Stock Description" Width="auto" IsReadOnly="True" FontWeight="SemiBold">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="TextAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center" />
                            <Style.Triggers>
                                <Trigger Property="Text" Value="Yes">
                                    <Setter Property="Background" Value="LightGreen"/>
                                </Trigger>
                                <Trigger Property="Text" Value="No">
                                    <Setter Property="Background" Value="#FFFF6969"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn  Visibility="Visible" Width="5">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>


                <!---Percentage column-->
                <DataGridTextColumn Binding="{Binding Percentage}" Header="Percentage" Width="auto" FontWeight="SemiBold">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="TextAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center" />
                            <Style.Triggers>
                                <Trigger Property="Text" Value="Yes">
                                    <Setter Property="Background" Value="LightGreen"/>
                                </Trigger>
                                <Trigger Property="Text" Value="No">
                                    <Setter Property="Background" Value="#FFFF6969"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn  Visibility="Visible" Width="5">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>

                <!---Kilograms-->
                <DataGridTextColumn Binding="{Binding Kilograms}" Header="Kilograms" Width="Auto" IsReadOnly="True" FontWeight="SemiBold">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Left" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn  Visibility="Visible" Width="5">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="HorizontalAlignment" Value="Center" />
                            <Setter Property="VerticalAlignment" Value="Center"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>

        <!---labels names and combo box as well textbox-->
        <Label x:Name="lblDriverName_Copy" FontWeight="SemiBold" Visibility="Visible" Content="Recipe Code:" HorizontalAlignment="Left" VerticalAlignment="Top" Width="179" HorizontalContentAlignment="Right" Background="#FFE3E3E3" Margin="17,65,0,0" BorderThickness="1" BorderBrush="#FFBEBEBE"/>
        <ComboBox x:Name="cbxRecipe" TabIndex="1" IsTextSearchEnabled="True"   IsEditable="True"    IsTextSearchCaseSensitive="False"  Foreground="Black" HorizontalAlignment="Left" Margin="207,63,0,0" VerticalAlignment="Top" Width="214" SelectionChanged="cbxRecipe_SelectionChanged">
            <ComboBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel />
                </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
        </ComboBox>
        
        <!---Ingredient Details-->
        <Label Content="Ingredient Details"
       FontWeight="SemiBold"
       HorizontalAlignment="Left"
       HorizontalContentAlignment="Center"
       VerticalAlignment="Top"
       Width="260"
       BorderBrush="#FFBEBEBE"
       Background="#FFE3E3E3"
       BorderThickness="1.5"
       Foreground="Black"
       Height="30"
       VerticalContentAlignment="Center"
       FontSize="12"
       Margin="288,104,0,0"/>
        
        
        <!---Recipe Details-->
        <Label Content="Recipe Details" FontWeight="SemiBold"  HorizontalAlignment="Left" HorizontalContentAlignment="Center" VerticalAlignment="Top" Width="260" BorderBrush="#FFBEBEBE" Background="#FFE3E3E3" BorderThickness="1.5" Foreground="Black" Height="30" VerticalContentAlignment="Center" FontSize="12" Margin="14,103,0,0"/>
        <Label x:Name="lblIDX" FontWeight="SemiBold" FontSize="10" Visibility="Visible" Content="IDX:" HorizontalAlignment="Left" VerticalAlignment="Top" Width="124" HorizontalContentAlignment="Right" Background="#FFE3E3E3" Margin="17,135,0,0" BorderThickness="1" BorderBrush="#FFBEBEBE"/>
        <TextBox x:Name="txtIDX" Foreground="Black" HorizontalAlignment="Left" Visibility="Visible" FontSize="10" Height="26" Margin="146,132,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Label x:Name="lblRecipe" FontSize="10" FontWeight="SemiBold" Visibility="Visible" Content="Recipe Name:" HorizontalAlignment="Left" VerticalAlignment="Top" Width="124" HorizontalContentAlignment="Right" Background="#FFE3E3E3" Margin="17,163,0,0" BorderThickness="1" BorderBrush="#FFBEBEBE"/>
        <TextBox x:Name="txtRecipe" Foreground="Black" FontSize="10" HorizontalAlignment="Left" Visibility="Visible" Height="26" Margin="146,160,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Label x:Name="lblRecoNo" FontSize="10" FontWeight="SemiBold" Visibility="Visible" Content="Rec No:" HorizontalAlignment="Left" VerticalAlignment="Top" Width="124" HorizontalContentAlignment="Right" Background="#FFE3E3E3" Margin="17,191,0,0" BorderThickness="1" BorderBrush="#FFBEBEBE"/>
        <TextBox x:Name="txtRecNo" FontSize="10" Foreground="Black" HorizontalAlignment="Left" Visibility="Visible" Height="26" Margin="146,188,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Label x:Name="lblDesc" FontSize="10" FontWeight="SemiBold" Visibility="Visible" Content="Description:" HorizontalAlignment="Left" VerticalAlignment="Top" Width="124" HorizontalContentAlignment="Right" Background="#FFE3E3E3" Margin="17,220,0,0" BorderThickness="1" BorderBrush="#FFBEBEBE"/>
        <TextBox x:Name="txtDescription" FontSize="10" Foreground="Black" HorizontalAlignment="Left" Visibility="Visible" Height="26" Margin="146,217,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Label x:Name="lblBatchSize" FontSize="10" FontWeight="SemiBold" Visibility="Visible" Content="Batch Size:" HorizontalAlignment="Left" VerticalAlignment="Top" Width="124" HorizontalContentAlignment="Right" Background="#FFE3E3E3" Margin="17,248,0,0" BorderThickness="1" BorderBrush="#FFBEBEBE"/>
        <TextBox x:Name="txtBatchSize" FontSize="10" Foreground="Black" HorizontalAlignment="Left" Visibility="Visible" Height="26" Margin="146,245,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Label x:Name="lblBagWeight"
       Content="Bag Weight:"
       FontWeight="SemiBold"
       FontSize="10"
       Visibility="Visible"
       HorizontalAlignment="Left"
       VerticalAlignment="Top"
       Width="124"
       HorizontalContentAlignment="Right"
       Background="#FFE3E3E3"
       Margin="17,273,0,0" 
       BorderThickness="1"
       BorderBrush="#FFBEBEBE"/>

        <TextBox x:Name="txtBagWeight"
         Foreground="Black"
         FontSize="10"
         HorizontalAlignment="Left"
         Visibility="Visible"
         Height="26"
         Margin="146,270,0,0" 
         TextWrapping="Wrap"
         VerticalAlignment="Top"
         Width="120"/>

        <Button Content="Save"
        FontWeight="SemiBold"
        FontSize="10"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="90"
        Height="30"
        Background="ForestGreen"
        Margin="146,310,0,0" 
        
        BorderThickness="1"
        BorderBrush="#FFBEBEBE"/>
        
        <!---No of premix-->

        <StackPanel Grid.Row="4" Orientation="Horizontal">
            <StackPanel.Resources>
                <Style x:Name="MyStyle" TargetType="TextBlock">
                    <Setter Property="Width" Value="80"></Setter>
                    <Setter Property="Height" Value="16"></Setter>
                    <Setter Property="VerticalAlignment" Value="Top"></Setter>
                </Style>
            </StackPanel.Resources>
          
            <!---Binding the grid-->
            
    
        </StackPanel>
    </Grid>
</UserControl>