We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Unable to insert TextBox or Button

Thread ID:

Created:

Updated:

Platform:

Replies:

141534 Dec 17,2018 09:47 AM UTC Jan 3,2019 11:31 AM UTC WPF 7
loading
Tags: GanttControl
Sharath Gangadhar
Asked On December 17, 2018 09:47 AM UTC

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 [Syncfusion]
Replied On December 18, 2018 07:34 AM UTC

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.  
 
 
Output: 
 
 
Please let us know if you have any other queries.  
 
Regards, 
Muneesh Kumar G.  
 


Sharath Gangadhar
Replied On December 18, 2018 09:20 AM UTC

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 [Syncfusion]
Replied On December 19, 2018 05:03 AM UTC

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  
 
 
Output : 
 
 
 
Please let us know if you have any other queries.  
 
Regards, 
Muneesh Kumar G. 
 


Sharath Gangadhar
Replied On December 27, 2018 07:05 AM UTC

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 [Syncfusion]
Replied On December 31, 2018 06:43 AM UTC

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. 
 
 
Output : 
 
 
Please let us know if you have any other queries. 
 
Thanks, 
Muneesh Kumar G. 
 


Sharath Gangadhar
Replied On January 3, 2019 06:54 AM UTC

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 [Syncfusion]
Replied On January 3, 2019 11:31 AM UTC

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}"> 
 
 
 
We have modified the sample. Please find it from the below link. 
 
 
Output : 
 
 
Please let us know if you have any other queries. 
 
Regards, 
Muneesh Kumar G. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon