TabControl SelectionChanging / SelectionChanged

6 posts, 1 answers
  1. codputer
    codputer avatar
    45 posts
    Member since:
    Apr 2007

    Posted 14 Sep 2010 Link to this post

    Way back in WinForm days, I had a problem with the SelectionChanged event in the TabControl.  I didn’t want to know when the TabControl Changed, I want to know if the Tab Control is changing!

     

    Back in Winform, I inherited the old control, overrode the event, threw my own changing event, and if it was not canceled, then threw the changing event.

     

    With all this work an issues documented on the net with WINFORM – did Telerik really miss this one as well? Any suggestions to overcome (like E.Cancel =  True)?

     

    Regards,

    Richard

     

    p.s. This is what I did, and I’m getting the previous tab, not even the currently selected tab… arrrgghh.

     

             <i:Interaction.Triggers>
                     <i:EventTrigger EventName="SelectionChanged">
                              <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding SetSelectedTabHeaderCommand, Mode=OneWay}" CommandParameter="{Binding SelectedItem.Header, ElementName=tc_MatterInfo}"/>
                     </i:EventTrigger>
             </i:Interaction.Triggers>

     

    My view model:

     #region SelectedTab
     
            RelayCommand<String> _SelectedTabHeaderCommand = null;
            public RelayCommand<string> SetSelectedTabHeaderCommand
            {
                get
                {
                    if (_SelectedTabHeaderCommand == null)
                        _SelectedTabHeaderCommand = new RelayCommand<string>(SetSelectedTabHeader);
     
                    return _SelectedTabHeaderCommand;
                }
            }
     
            private void SetSelectedTabHeader(string pTabHeader)
            {
                SelectedTabHeader = pTabHeader;
            }
     
            string _SelectedTabHeader = string.Empty;
            public string SelectedTabHeader
            {
                get
                {
                    return _SelectedTabHeader;
                }
                private set
                {
                    _SelectedTabHeader = value;
                    this.RaisePropertyChanged("SelectedTabHeader");
                }
            }
            #endregion

     

  2. Answer
    Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 16 Sep 2010 Link to this post

    Hello Richard,

    RadTabControl has an event called PreviewSelectionChanged. Will it work for you if you handle the event in the event handler?

    <telerik:RadTabControl PreviewSelectionChanged="RadTabControl_PreviewSelectionChanged" />

    private void RadTabControl_PreviewSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
    {
        e.Handled = true;
    }

    Best wishes,
    Kiril Stanoev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. codputer
    codputer avatar
    45 posts
    Member since:
    Apr 2007

    Posted 16 Sep 2010 Link to this post

    Awesome!  Is there any examples on how these types of events can be handled using MVVM?  It's not a command, so how do I get these parameters into my MVVM without taking a dependency from the view to the viewmodel?  I'm not religious about no code in the code behind, I'm just wanting to keep the separation as cleanly as possible - allowing the MVVM to manage the view via bindings as much as possible.

    keep up the great work!
    R
  5. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 20 Sep 2010 Link to this post

    Hello codputer,

    Could you please be more specific on what you need to do, because this is a regular event on the RadTabControl, so you can manage it with commands like the way you do it with the SelectionChanged event.

    Greetings,
    Viktor Tsvetkov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Aleah Dillon
    Aleah Dillon avatar
    6 posts
    Member since:
    Jan 2009

    Posted 14 Dec 2010 Link to this post

    I'm trying to do this with MVVM as well.  I have a simple command (derived from ICommand) defined that performs some action.  When I bind the command to my RadTabControl I get this error.

    XamlParseException occurred - Failed to assign to property 'Telerik.Windows.Controls.RadTabControl.SelectionChanged'
    {System.Windows.Markup.XamlParseException: Failed to assign to property 'Telerik.Windows.Controls.RadTabControl.SelectionChanged'. [Line: 61 Position: 46]
       at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
       at SP.CE.SilverlightClient.Views.Job.InitializeComponent()
       at SP.CE.SilverlightClient.Views.Job..ctor()}

    Here is my Xaml

        <UserControl.Resources>
            <scpconv:EnumToDescriptionConverter x:Key="enumDescriptionConverter"/>
              
            <DataTemplate x:Key="TabItemTemplate">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                            <TextBlock Text="{Binding Converter={StaticResource enumDescriptionConverter}}"/>
                            <!-- here is where we will put the validation images -->
                        </StackPanel>
            </DataTemplate>
            <DataTemplate x:Key="ContentTemplate">
                <!--<TextBlock Text="Some content here"/>-->
                <ContentPresenter Content="{Binding ElementName=JobViewUserControl, Path=DataContext.SelectedContent}" Style="{StaticResource MvvmContentPresenterStyle}"/>
            </DataTemplate>
        </UserControl.Resources>
      
    <telerik:RadTabControl x:Name="TabSteps" Background="White" telerik:StyleManager.Theme="Vista" ItemsSource="{Binding AvailableSteps}"
    ContentTemplate="{StaticResource ContentTemplate}"   
    ItemTemplate="{StaticResource TabItemTemplate}"
    SelectionChanged="{Binding StepChangeCommand}"  
    SelectedItem="{Binding SelectedStep, Mode=TwoWay}"/>

    I don't want to put anything in my Code-Behind for the View.  Is there a way to do this?
  7. Aleah Dillon
    Aleah Dillon avatar
    6 posts
    Member since:
    Jan 2009

    Posted 14 Dec 2010 Link to this post

    I wanted to share my workaround for this for now (though I do wish it were as clean as setting the Event Property on the tab control.

    I created a PlainButton style:
    <ResourceDictionary
          
        <Style x:Key="PlainButton" TargetType="Button">
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
              
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter Content="{TemplateBinding Content}" Cursor="{TemplateBinding Cursor}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>

    Then in the DataTemplate for my tab item I place my content in a button with that style.  By using a ContentPresenter in my style I'm able to put anything I want in that button's content.  Then I'm invoking my command in my ViewModel from that button.

    <UserControl.Resources>
        <scpconv:EnumToDescriptionConverter x:Key="enumDescriptionConverter"/>
          
        <DataTemplate x:Key="TabItemTemplate">
            <Button Command="{Binding ElementName=JobViewUserControl, Path=DataContext.StepChangeCommand}" CommandParameter="{Binding}" Style="{StaticResource PlainButton}">
                <Button.Content>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <TextBlock Text="{Binding Converter={StaticResource enumDescriptionConverter}}"/>
                        <!-- here is where we will put the validation images -->
                    </StackPanel>
                </Button.Content>
            </Button>
        </DataTemplate>
    </UserControl.Resources>

    Then I just set the ItemTemplate property on my tab control:

    <telerik:RadTabControl x:Name="FNOLSteps" Background="White" telerik:StyleManager.Theme="Vista"  ItemsSource="{Binding AvailableSteps}"
                                ContentTemplate="{StaticResource ContentTemplate}" 
                                ItemTemplate="{StaticResource TabItemTemplate}"/>

    My command is invoked and I didn't have to add anything to the code-behind of my view.
    Definitely wish it were cleaner, but I hope this helps someone.

    Aleah
Back to Top
DevCraft banner