Closable Tabs - WPF Discussion Boards

24-Jul-11 8:19

david1313 wrote:
I have code to add my tab items to the control and it works

So you are adding tabitems using code, yes?

I'm not sure how much of the construction/initialization code the editor runs in the classes we code, but if it's not showing up in the designer then you could always put a dummy TabItem in the XAML.

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

Re: can't edit tabitem

david131324-Jul-11 8:26

david1313

24-Jul-11 8:26

Yes, I'm adding tabs using code. How do you create a dummy TabItem?

David W Wright

Re: can't edit tabitem

Mark Salsbery24-Jul-11 8:28

24-Jul-11 8:28

Put that XAML in the TabControl if it's in XAML or add an item in the constructor perhaps?

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

Closable Tabs

jgalak23-Jul-11 8:03

23-Jul-11 8:03

I'm trying to make a tab with a close button (a la Firefox and pretty much everything else that uses tabs), and was trying to follow this tutorial:

How to add a Close button to a WPF TabItem[^]

Unfortnately, it doesn't seem to work. The problem appears to be that in the ClosableHeader class there is a button, defined in the xaml, with

Name="button_close"

It's then referenced in the C# code for the ClosableTab class as follows:

// Create an instance of the usercontrol
CloseableHeader closableTabHeader = new CloseableHeader();

// Assign the usercontrol to the tab header
this.Header = closableTabHeader;

// Attach to the CloseableHeader events (Mouse Enter/Leave, Button Click, and Label resize)
closableTabHeader.button_close.MouseEnter += new MouseEventHandler(button_close_MouseEnter);
closableTabHeader.button_close.MouseLeave += new MouseEventHandler(button_close_MouseLeave);
closableTabHeader.button_close.Click += new RoutedEventHandler(button_close_Click);
closableTabHeader.label_TabTitle.SizeChanged += new sizeChangedEventHandler(label_TabTitle_SizeChanged);

This generates compile-time errors for every line that contains the text

closableTabHeader.button_close

with the message "'WGPM.Views.CloseableHeader' does not contain a definition for 'button_close' and no extension method 'button_close' accepting a first argument of type 'WGPM.Views.CloseableHeader' could be found (are you missing a using directive or an assembly reference?)" (WGPM.Views is the namespace I'm using).

What am I missing? Can I not just refer to a named control like that?

Thanks,
Juliean.

SledgeHammer0123-Jul-11 11:42

23-Jul-11 11:42

Sounds to me like either your XAML or code behind class is in the wrong namespace. They have to be in the same namespace to access stuff the way you are trying to.

jgalak23-Jul-11 14:48

23-Jul-11 14:48

Wouldn't that cause an error on the line where the CloseableHeader is created? If it was in a different namespace, I'd get a compile error at that time, wouldn't I? The CloseableHeader gets created correctly, and the assignment of it to the ClosableTab works, but the reference to button_close and label_TabTitle doesn't.

SledgeHammer0123-Jul-11 15:01

23-Jul-11 15:01

Not necessarily. The names such as "button_close" and "label_TabTitle" are actually defined in a compiler generated partial class thats not shown in Visual Studio. So the class itself might be in your scope, but the stuff inside it may not be.

Post more of your XAML and .cs class so we can take a look.

Mark Salsbery23-Jul-11 15:36

23-Jul-11 15:36

Look in the generated code (CloseableHeader.g.cs)....is the button_close member defined there? And if so, what is its access modifier?

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

jgalak24-Jul-11 9:21

24-Jul-11 9:21

Ok, I'm missing something here. I don't have a CloseableHeaders.g.cs file. All I have is CloseableHeader.xaml and CloseableHeader.xaml.cs

I'm posting the listings of the xaml and the two .cs files (is there a way to add an attachment on this forum?), but they are just copied from the tutorial with virtually no changes.

I'm starting to lean towards this being a namespace issue, as I want the namespace to be WGPM.Views, but as far as directory structure it's in WGPM\Views\BaseClasses

I'm using VS10, .Net 4.0, Win7/64.

CloseableHeader.xaml:

<UserControl x:Class="CloseableHeader"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="23" d:DesignWidth="81" Margin="0"
             xmlns:local="clr-namespace:WGPM.Views">
    <Grid>
        <Button Content="X"  Height="19" HorizontalAlignment="Right" Margin="0,3,4,0" Name="button_close" VerticalAlignment="Top" Width="20" FontFamily="Courier" FontWeight="Bold" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" FontStretch="Normal" Visibility="Visible" FontSize="14" Padding="0" ToolTip="Close"/>
        <Label Content="TabItem"  Height="23" HorizontalAlignment="Left" Margin="4,1,0,0" Name="label_TabTitle" VerticalAlignment="Top" FontFamily="Courier" FontSize="12" />
    </Grid>
</UserControl>

CloseableHeader.xamls.cs:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;


namespace WGPM.Views
{
    /// <summary>
    /// Interaction logic for CloseableItem.xaml
    /// </summary>
    public partial class CloseableHeader : UserControl
    {

        public CloseableHeader()
        {
            InitializeComponent();
        }
    }

}

ClosableTab.cs

using System;
using System.Windows.Controls;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;


namespace WGPM.Views
{
    class ClosableTab : TabItem
    {


        // Constructor
        public ClosableTab()
        {
            // Create an instance of the usercontrol
            CloseableHeader closableTabHeader = new CloseableHeader();

            // Assign the usercontrol to the tab header
            this.Header = closableTabHeader;

            // Attach to the CloseableHeader events (Mouse Enter/Leave, Button Click, and Label resize)
            closableTabHeader.button_close.MouseEnter += new MouseEventHandler(button_close_MouseEnter);
            closableTabHeader.button_close.MouseLeave += new MouseEventHandler(button_close_MouseLeave);
            closableTabHeader.button_close.Click += new RoutedEventHandler(button_close_Click);
            closableTabHeader.label_TabTitle.SizeChanged += new SizeChangedEventHandler(label_TabTitle_SizeChanged);
        }



        /// <summary>
        /// Property - Set the Title of the Tab
        /// </summary>
        public string Title
        {
            set
            {
                ((CloseableHeader)this.Header).label_TabTitle.Content = value;
            }
        }




        //
        // - - - Overrides  - - -
        //


        // Override OnSelected - Show the Close Button
        protected override void OnSelected(RoutedEventArgs e)
        {
            base.OnSelected(e);
            ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Visible;
        }

        // Override OnUnSelected - Hide the Close Button
        protected override void OnUnselected(RoutedEventArgs e)
        {
            base.OnUnselected(e);
            ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Hidden;
        }

        // Override OnMouseEnter - Show the Close Button
        protected override void OnMouseEnter(MouseEventArgs e)
        {
            base.OnMouseEnter(e);
            ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Visible;
        }

        // Override OnMouseLeave - Hide the Close Button (If it is NOT selected)
        protected override void OnMouseLeave(MouseEventArgs e)
        {
            base.OnMouseLeave(e);
            if (!this.IsSelected)
            {
                ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Hidden;
            }
        }





        //
        // - - - Event Handlers  - - -
        //


        // Button MouseEnter - When the mouse is over the button - change color to Red
        void button_close_MouseEnter(object sender, MouseEventArgs e)
        {
            ((CloseableHeader)this.Header).button_close.Foreground = Brushes.Red;
        }

        // Button MouseLeave - When mouse is no longer over button - change color back to black
        void button_close_MouseLeave(object sender, MouseEventArgs e)
        {
            ((CloseableHeader)this.Header).button_close.Foreground = Brushes.Black;
        }


        // Button Close Click - Remove the Tab - (or raise an event indicating a "CloseTab" event has occurred)
        void button_close_Click(object sender, RoutedEventArgs e)
        {
            ((TabControl)this.Parent).Items.Remove(this);
        }


        // Label SizeChanged - When the Size of the Label changes (due to setting the Title) set position of button properly
        void label_TabTitle_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            ((CloseableHeader)this.Header).button_close.Margin = new Thickness(((CloseableHeader)this.Header).label_TabTitle.ActualWidth + 5, 3, 4, 0);
        }





    }
}

Mark Salsbery24-Jul-11 9:26

24-Jul-11 9:26

jgalak wrote:
I don't have a CloseableHeaders.g.cs file

If that's the case then no, it's not going to work because the members are truly not part of the class.

Right-click on the "InitializeComponent()" in your CloseableHeader.xaml.cs file....choose "Go to definition".That should bring you to the generated file (CloseableHeaders.g.cs) - the other half of your partial usercontrol class. Does it?

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

jgalak24-Jul-11 9:36

24-Jul-11 9:36

Mark Salsbery wrote:

Right-click on the "InitializeComponent()" in your CloseableHeader.xaml.cs file....choose "Go to definition".That should bring you to the generated file (CloseableHeaders.g.cs) - the other half of your partial usercontrol class. Does it?

No, it doesn't. In fact, that's one of the compile errors that comes up.

Is there a way to force it to create the generated file?

Mark Salsbery24-Jul-11 9:41

24-Jul-11 9:41

Just create a new usercontrol by adding one to your project. Then copy the code into your new xamlcs files.

Or if you have the source code from the article then the g.cs file should be in there.

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

SledgeHammer0124-Jul-11 9:54

24-Jul-11 9:54

You are missing the obvious Mark. Its a namespace issue just as I originally said 2 days ago, but OP chose to ignore my advice Smile | :)

. He is missing the namespace in his x:class.

Mark Salsbery24-Jul-11 11:17

24-Jul-11 11:17

Well I figure if he just adds a usercontrol to the project the namespace will be fixed Smile | :)

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

SledgeHammer0124-Jul-11 9:52

24-Jul-11 9:52

Jeez man... why didn't you just listen to me? Smile | :)

... your problem is EXACTLY what I told you. Your class is WGPM.Views.ClosableTab, but your XAML is just ClosableTab. Fix your x:Class to be WGPM.Views.ClosableTab and all will be right with the world.

jgalak27-Jul-11 14:31