Unable to insert TextBox or Button

[Sharath Gangadhar]

Hello Team,

please find attached code,

1. I cant able to modified image which is present on top, i need to align TopLeft Corner of the screen(Edge).

2. I cant able to insert few TextBox as well as Buttons in Middle TabIteam of the UI,

    i.e In Middle Tab, Above GanttControl i'm unable to insert below code.

<TextBox x:Name="G_Heading" Height="28" Width="980" BorderThickness="2" Text=" " RenderTransformOrigin="0.375,3.867" Canvas.Top="23" Canvas.Left="10">

                            <TextBox.Resources>

                                <Style TargetType="{x:Type Border}">

                                    <Setter Property="CornerRadius" Value="10"/>

                                </Style>

                            </TextBox.Resources>

                            <TextBox.Effect>

                                <DropShadowEffect Color="#FFDEDADA" ShadowDepth="3"/>

                            </TextBox.Effect>

                        </TextBox>

                        <TextBlock Name="HeadingText2" FontSize="30" Text="GANTT VIEWER" Foreground="Black" Margin="13,60,316,279"/>

                        <Button Name="button_filter" Content="FILTER" TextBlock.TextAlignment="Center" Width="180" Height="24" Click="OnClickFilterBtn" Canvas.Top="70" Canvas.Left="800" Background="#FFF9FBFB" FontWeight="Bold">

                            <Button.Resources>

                                <Style TargetType="{x:Type Border}">

                                    <Setter Property="CornerRadius" Value="10"/>

                                </Style>

                            </Button.Resources>

                            <Button.Effect>

                                <DropShadowEffect Color="#FFDEDADA" ShadowDepth="3"/>

                            </Button.Effect>

                        </Button>

                        <Button Name="button_weekly" Width="180" Height="24" Click="OnImageButtonClick" Canvas.Top="120" Canvas.Left="800" Background="#FFF9FBFB">

                            <Image Source="/drawable/5.png" Width="51" Height="24"></Image>

                            <Button.Resources>

                                <Style TargetType="{x:Type Border}">

                                    <Setter Property="CornerRadius" Value="10"/>

                                </Style>

                            </Button.Resources>

                            <Button.Effect>

                                <DropShadowEffect Color="#FFDEDADA" ShadowDepth="3"/>

                            </Button.Effect>

                        </Button>

 

Attachment: ModifiedSample483326736_745344d8.zip

[Muneesh Kumar G]

Hi Sharath, 

 

Greetings from Syncfusion. 

 

We have analyzed you code snippet and sample and we have found that you have placed the GanttControl inside the Grid layout. But in provided code snippet you have used Canvas.Left and Canvas.Top to place the TextBox and Buttons. We would like to inform you that Canvas.Top and Canvas.Left property works only to its direct children. So, you can move the grid children by defining RowDefinition and setting Grid.Row to the corresponding children as per the below code snippet.   

 

Code snippet: 

… 

<Grid.RowDefinitions> 

    <RowDefinition Height="Auto"/> 

    <RowDefinition Height="Auto"/> 

    <RowDefinition Height="Auto"/> 

    <RowDefinition Height="Auto"/> 

    <RowDefinition Height="*"/> 

</Grid.RowDefinitions> 

 

<TextBlock Name="HeadingText2" FontSize="30" Text="GANTT VIEWER" 

           Foreground="Black" 

           HorizontalAlignment="Center" 

           Grid.Row="0"/> 

 

<TextBox x:Name="G_Heading" 

         Height="28" Width="980" 

         BorderThickness="2" Text=" " 

         RenderTransformOrigin="0.375,3.867" 

         Grid.Row="1"> 

    <TextBox.Resources> 

        <Style TargetType="{x:Type Border}"> 

            <Setter Property="CornerRadius" Value="10"/> 

        </Style> 

    </TextBox.Resources> 

    <TextBox.Effect> 

        <DropShadowEffect Color="#FFDEDADA" ShadowDepth="3"/> 

    </TextBox.Effect> 

</TextBox> 

 

<Button Name="button_filter" Content="FILTER" 

        TextBlock.TextAlignment="Center" 

        Width="180" Height="24" Click="OnClickFilterBtn" 

        Grid.Row="2" 

        Background="#FFF9FBFB" FontWeight="Bold"> 

    <Button.Resources> 

        <Style TargetType="{x:Type Border}"> 

            <Setter Property="CornerRadius" Value="10"/> 

        </Style> 

    </Button.Resources> 

    <Button.Effect> 

        <DropShadowEffect Color="#FFDEDADA" ShadowDepth="3"/> 

    </Button.Effect> 

</Button> 

 

<Button Name="button_weekly" Width="180" Height="24" Click="OnImageButtonClick" 

        Grid.Row="3" 

        Background="#FFF9FBFB"> 

    <Image Source="/assest/5.png" Width="51" Height="24"></Image> 

    <Button.Resources> 

        <Style TargetType="{x:Type Border}"> 

            <Setter Property="CornerRadius" Value="10"/> 

        </Style> 

    </Button.Resources> 

    <Button.Effect> 

        <DropShadowEffect Color="#FFDEDADA" ShadowDepth="3"/> 

    </Button.Effect> 

</Button> 

 

<gantt:GanttControl x:Name="Gantt"  

                     ItemsSource="{Binding TaskDetails}" 

                    VisualStyle="Metro" 

                    ScheduleRangePadding="3" 

                    GridWidth="100" 

                    ScheduleType="CustomDateTime" 

                    CustomScheduleSource="{Binding CustomScheduleSource}" 

                    Grid.Row="4"> 

… 

 

We have modified the sample based on this, please find the sample from the following location.  

 

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/WpfAppCamboApp2065801210  

 

Output: 

 

 

Please let us know if you have any other queries.  

 

Regards, 

Muneesh Kumar G.  

 

[Sharath Gangadhar]

Muneesh,

even i can't able to  place a icon/Image in LeftTop corner Position.

i.e I want to place logo image in the postion of LeftTop corner.

[Muneesh Kumar G]

Hi Sharath, 

 

You can achieve the image alignment in left top corner by setting VerticalAlignment property in Image as per the below code snippet.  

 

Code snippet: 

<Grid> 

    <Image Source="/assest/logo.png" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top"/> 

    <TabControl Name="TabControl1" TabStripPlacement="Left" Margin="-6,46,-14,-453" BorderBrush="White"> 

… 

 

Also, we have modified our sample based on this. Please find it from below link  

 

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/IconAlignment734162332  

 

Output : 

 

 

 

Please let us know if you have any other queries.  

 

Regards, 

Muneesh Kumar G. 

 

[Sharath Gangadhar]

In Middle Tab, i.e Gantt View - There is two diffrent table(Left side and Right Side) How to hide scrollable in left side Table(i.e only left to right side scroll since single columns data present in table).??

[Muneesh Kumar G]

Hi Sharath, 

 

Thanks for your update. 

 

You can achieve your requirement “Hiding the GanttGrid’s Horizontal scroll bar” by setting GanttGrid’s ScrollViewer’s HorizontalScrollBarVisibility as Disabled in GanttControl’s loaded event as per the below snippet. 

 

void AssociatedObject_Loaded(object sender, RoutedEventArgs e) 

{ 

    if (this.AssociatedObject.GanttGrid != null) 

    { 

       … 

        ScrollViewer gridScrollViewer = this.AssociatedObject.GanttGrid.FindElementOfType<ScrollViewer>(); 

 

        if (gridScrollViewer != null) 

        { 

            gridScrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; 

        } 

      … 

    } 

} 

 

 

Note: We have increased GridWidth of GanttControl to avoid column cropping in load time as per the below code snippet. 

 

<gantt:GanttControl x:Name="Gantt"  

                     ItemsSource="{Binding TaskDetails}" 

                    VisualStyle="Metro" 

                    ScheduleRangePadding="3" 

                    GridWidth="150" 

                    ScheduleType="CustomDateTime" 

                    CustomScheduleSource="{Binding CustomScheduleSource}" 

                    Grid.Row="2"> 

 

 

We have modified our sample for the same. Please find it from the below link. 

 

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/DisabledGridScrollViewer-275231448  

 

Output : 

 

 

Please let us know if you have any other queries. 

 

Thanks, 

Muneesh Kumar G. 

 

[Sharath Gangadhar]

Thanks for the update,  

In Middle Tab of attached application, Is there any way to disable Modification of Gantt Bar value from user? If yes, please share code for this..

i have two more doubts-

Doubt 1:

but when we drag the Vertical scroll view, Left side table get extends. i want to disable this

Doubt 2:

I want to start my Tab control items should be start from top of the screen.?

how can we achieve this task?

[Muneesh Kumar G]

Hi Sharath, 

 

Thanks for your update. 

 

Query 1: Disable Modification of Gantt Bar value from user 

 

You can achieve this by disabling the thumbs of Gantt Node in its Style as per the below code snippet. 

 

Code Snippet: 

<Grid.Resources> 

    <!--To change the appearence of Gantt Node--> 

    <Style x:Key="TaskNode" TargetType="{x:Type chart:GanttNode}"> 

        <Setter Property="Template"> 

… 

   <Thumb x:Name="PART_DragDropThumb" 

       Grid.Column="0" 

       Grid.ColumnSpan="3" 

       Cursor="SizeAll" 

       IsEnabled="False"> 

    <Thumb.Template> 

        <ControlTemplate> 

            <Border Background="Transparent" /> 

        </ControlTemplate> 

    </Thumb.Template> 

   </Thumb> 

… 

         <Thumb x:Name="PART_ProgressThumb" 

                HorizontalAlignment="Right" 

                Cursor="SizeWE" 

                IsEnabled="False"> 

             <Thumb.Template> 

                 <ControlTemplate> 

                     <Border Background="Transparent" BorderBrush="Transparent"> 

                         <Rectangle Width="5" 

                                    Height="2" 

                                    Fill="Transparent" /> 

                     </Border> 

                 </ControlTemplate> 

             </Thumb.Template> 

         </Thumb> 

     </Grid> 

</Border> 

 

<Thumb x:Name="PART_RightThumb" 

        Grid.Column="2" 

        HorizontalAlignment="Right" 

        Cursor="ScrollE" 

        IsEnabled="False"> 

     <Thumb.Template> 

         <ControlTemplate> 

             <Border Width="4" 

                     Height="20" 

                     Background="Transparent" 

                     BorderBrush="Transparent" 

                     BorderThickness="0" /> 

         </ControlTemplate> 

     </Thumb.Template> 

</Thumb> 

 

<Thumb x:Name="PART_LeftThumb" 

        Grid.Column="0" 

        HorizontalAlignment="Left" 

        Cursor="ScrollW" 

        IsEnabled="False"> 

     <Thumb.Template> 

         <ControlTemplate> 

             <Border Width="4" 

                     Height="20" 

                     Background="Transparent" 

                     BorderBrush="Transparent" 

                     BorderThickness="0" /> 

         </ControlTemplate> 

     </Thumb.Template> 

</Thumb> 

… 

      </Setter> 

  </Style> 

 

Query 2: When we drag the Vertical scroll view, Left side table get extends. i want to disable this  

 

You can achieve this by disabling the GridSplitter in the GanttControl loaded event as per the below code snippet. 

 

Code Snippet: 

void AssociatedObject_Loaded(object sender, RoutedEventArgs e) 

{ 

    if (this.AssociatedObject.GanttGrid != null) 

    { 

        … 

        GridSplitter gridSplitter = this.AssociatedObject.FindElementOfType<GridSplitter>(); 

        if(gridSplitter != null) 

        { 

            gridSplitter.IsEnabled = false; 

        } 

        … 

    } 

} 

 

Query 3: I want to start my Tab control items should be start from top of the screen.? 

 

 

 

In your sample you have added image then tab control in grid. So that the tab items rendered after that image. If we try to place the TabControl at the top of the screen, then the TabStrip hides the image. So, we have achieved your requirement by adding margin for TabStrip by applying style for TabControl and placed the TabControl at the top of the screen by removing the top margin added in the sample as per the code snippet. 

 

Code snippet: 

   <Window.Resources> 

        <SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/> 

        <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/> 

        <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}"> 

            <Setter Property="Padding" Value="2"/> 

            <Setter Property="HorizontalContentAlignment" Value="Center"/> 

            <Setter Property="VerticalContentAlignment" Value="Center"/> 

            <Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/> 

            <Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/> 

            <Setter Property="BorderThickness" Value="1"/> 

            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="{x:Type TabControl}"> 

… 

                            <Trigger Property="TabStripPlacement" Value="Left"> 

… 

                                <Setter Property="Margin" TargetName="headerPanel" Value="0,46,0,0"/> 

                            </Trigger> 

… 

                       </ControlTemplate.Triggers> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

    </Window.Resources> 

… 

       <Grid> 

           <Image Source="/assest/logo.png" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="-10,0,0,0" /> 

           <TabControl Name="TabControl1" TabStripPlacement="Left" Margin="0,0,-14,-453" BorderBrush="White" 

                       Style="{StaticResource TabControlStyle1}"> 

… 

 

Forum link to add the margin for TabStrip : https://social.msdn.microsoft.com/Forums/vstudio/en-US/8b4d58f1-430b-4c1e-9736-2a69b4882fba/how-to-indent-tabstrip-of-a-tabcontrol?forum=wpf  

 

We have modified the sample. Please find it from the below link. 

 

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/WpfAppCamboApp-621621994  

 

Output : 

 

 

Please let us know if you have any other queries. 

 

Regards, 

Muneesh Kumar G.