locked
Change grid visibility on button click in xaml RRS feed

  • Question

  • Hi,

    I want to change the grid visibility on button click in xaml. Basically I have two grids and each has button. Grids are placed inside tab control. If I use button click event to change the visibility in code behind the tab control is selected to first tab. Is there any way to handle this in xaml?

    Monday, March 7, 2011 4:27 AM

Answers

  • Hi,

    after clicking new button tab control's selectedindex is changed to 0.

    I'm not sure what your code looks like. I can't reproduce your problem.

    For me, I would like coding like this:

            private void BtnAdd_Click(object sender, RoutedEventArgs e)
            {
                MyDataGrid.Visibility = Visibility.Collapsed;
                MyDataForm.Visibility = Visibility.Visible;
                .......
            }

    If your code not like above, please give that a try.

    If I understand you incorrectly, to troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue .

    So, It's better that you can zip up your code for us so that we can test it. Thanks.

    Regards

    Sunday, March 13, 2011 10:13 PM

All replies

  • Which event you will make it visible to false? Anyway you need to click on the button to make it hidden even if it is in xaml? I dont understand your question

    Monday, March 7, 2011 6:43 AM
  • Hi,

    As I know we can use iteraction of Expression blend or Prism behaviors set up that properties but for dependency propery.

     

    Monday, March 7, 2011 8:00 AM
  • Hi,

    Thanks for your reply. Can you guide me with some sample using iteraction of Expression blend?

    Monday, March 7, 2011 8:29 AM
  • Hi,

    I have created sample code. Its not working if I place it inside dataform edit template but its working fine in without using dataform edit template. Can someone has point me right direction to achieve this?


    <sdk:ChildWindow 
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"	
        xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 	
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    	xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"	
        xmlns:System="clr-namespace:System;assembly=mscorlib"	
        x:Class="BusinessApplication1.ChildWindow1"
    	Title="Child Window" Width="400" Height="300">
    
        <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
            <toolkit:DataForm x:Name="df" AutoGenerateFields="False" AutoCommit="False" AutoEdit="False" CommandButtonsVisibility="None">
                <toolkit:DataForm.EditTemplate>
                    <DataTemplate>
    
                        <sdk:TabControl x:Name="tabControl" Background="{x:Null}" Margin="0" SelectedIndex="0">
    
                            <VisualStateManager.CustomVisualStateManager>
                                <ei:ExtendedVisualStateManager/>
                            </VisualStateManager.CustomVisualStateManager>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
                                    <VisualState x:Name="Show">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hide">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="VisualStateGroup1">
                                    <VisualState x:Name="Show1">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid1">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hide1">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid1">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
    
                            <sdk:TabItem Header="First Page" Style="{StaticResource TabItemStyle1}" Background="#FF1F3B53">
                                <Grid/>
                            </sdk:TabItem>
    
                            <sdk:TabItem Header="Second Page" Style="{StaticResource TabItemStyle1}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
    
                                    <Grid x:Name="grid" Visibility="Collapsed">
    
                                        <i:Interaction.Triggers>
                                            <i:EventTrigger EventName="Click" SourceName="button">
                                                <ei:GoToStateAction StateName="Hide"/>
                                            </i:EventTrigger>
                                            <i:EventTrigger EventName="Click" SourceName="button1">
                                                <ei:GoToStateAction StateName="Show"/>
                                            </i:EventTrigger>
                                        </i:Interaction.Triggers>
    
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="30"/>
                                            <RowDefinition Height="30"/>
                                            <RowDefinition Height="30"/>
                                        </Grid.RowDefinitions>
                                        <Button x:Name="button" Content="First Grid" HorizontalAlignment="Left" Width="75" />
                                        <TextBlock Margin="0" Text="1 Row 1" Grid.Row="1" VerticalAlignment="Center"/>
                                        <TextBlock Margin="0" Text="1 Row 2" Grid.Row="2" VerticalAlignment="Center"/>
                                        <TextBlock Margin="0" Text="1 Row 3" Grid.Row="3" VerticalAlignment="Center"/>
                                    </Grid>
    
                                    <Grid x:Name="grid1" Grid.Row="1">
    
                                        <i:Interaction.Triggers>
                                            <i:EventTrigger EventName="Click" SourceName="button">
                                                <ei:GoToStateAction StateName="Show1"/>
                                            </i:EventTrigger>
                                            <i:EventTrigger EventName="Click" SourceName="button1">
                                                <ei:GoToStateAction StateName="Hide1"/>
                                            </i:EventTrigger>
                                        </i:Interaction.Triggers>
    
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="30"/>
                                            <RowDefinition Height="30"/>
                                            <RowDefinition Height="30"/>
                                        </Grid.RowDefinitions>
                                        <Button x:Name="button1" Content="Second Grid" HorizontalAlignment="Left" Width="75" />
                                        <TextBlock Margin="0" Text="2 Row 1" Grid.Row="1" VerticalAlignment="Center"/>
                                        <TextBlock Margin="0" Text="2 Row 2" Grid.Row="2" VerticalAlignment="Center"/>
                                        <TextBlock Margin="0" Text="2 Row 3" Grid.Row="3" VerticalAlignment="Center"/>
                                    </Grid>
    
                                </Grid>
                            </sdk:TabItem>
    
                        </sdk:TabControl>
    
                    </DataTemplate>
                </toolkit:DataForm.EditTemplate>
            </toolkit:DataForm>
    
            <Button x:Name="OKButton" Content="Ok" Click="OKButton_Click" Width="75" Height="23" Margin="0,0,79,0" HorizontalAlignment="Right" Grid.Row="1" />
            <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Grid.Row="1" />
        </Grid>
    
    </sdk:ChildWindow>
    
    
    Code:

    using System.Windows;
    using System.Windows.Controls;
    
    namespace BusinessApplication1
    {
        public partial class ChildWindow1 : ChildWindow
        {
            public ChildWindow1()
            {
                InitializeComponent();
                Loaded += new RoutedEventHandler(ChildWindow1_Loaded);
            }
    
            void ChildWindow1_Loaded(object sender, RoutedEventArgs e)
            {
                newPerson = new Person() { Name = "My Name", PhoneNo = "1234567890", Email = "myname@mail.com" };
    
                this.df.CurrentItem = newPerson;
                this.df.BeginEdit();
            }
    
            public Person newPerson { get; set; }
    
            private void OKButton_Click(object sender, RoutedEventArgs e)
            {
                this.DialogResult = true;
            }
    
            private void CancelButton_Click(object sender, RoutedEventArgs e)
            {
                this.DialogResult = false;
            }
        }
    
        public class Person
        {
            public Person()
            {
    
            }
    
            public string Name { get; set; }
            public string PhoneNo { get; set; }
            public string Email { get; set; }
        }
    }


    Wednesday, March 9, 2011 6:48 AM
  • Hi,

    Can someone has point me right direction to achieve this?

    Do you ask the same quetion as your first post?

    I'm not clear understand your requirement? Please show more detail for your requirement.

    Thanks.

     

    Regards

    Thursday, March 10, 2011 8:02 AM
  • Hi,

    Thanks for your reply.

    Let me elabrate my requirement. I have data model with master-child relationship. I am using dataform edit template with tab control. For child entity, I have user control to input the values after succesfull it will be added to master entity. Those usercontrol and datagrid are placed in tab page 3. By default datagrid is set to visible and user control is set to collapsed. Button is used to add new child. When I click new button basically datagrid visibility is set to collapsed and usercontrol is set to visible. I have problem in this place, after clicking new button tab control's selectedindex is changed to 0. Its not showing tab page 3, when I moved to tab page 3 datagrid is visible and usercontrol is collapsed. How do I do that?

    Friday, March 11, 2011 10:04 AM
  • Hi,

    after clicking new button tab control's selectedindex is changed to 0.

    I'm not sure what your code looks like. I can't reproduce your problem.

    For me, I would like coding like this:

            private void BtnAdd_Click(object sender, RoutedEventArgs e)
            {
                MyDataGrid.Visibility = Visibility.Collapsed;
                MyDataForm.Visibility = Visibility.Visible;
                .......
            }

    If your code not like above, please give that a try.

    If I understand you incorrectly, to troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue .

    So, It's better that you can zip up your code for us so that we can test it. Thanks.

    Regards

    Sunday, March 13, 2011 10:13 PM