How to access Button programatically if the button is inside using C#

Question

Hi Guys,

I have few questions as I am usign XAML for the first time.

1. How do I use the button (BrowseButton) to browse a folder in Harddrive ? In this case as the button is inside

2. Can I use the way I have shown below? Actually first dockpanel will hold the image and some label and the other dockpanel will have tabcontrol in it.

3. If I have a tabcontrol, How can I add a listview which can increase the tabs during runtime.. and the listview should be available in the runtime also. How to add a close("X") mark on the top of the tab to close the button

probably I asked a lot of questions, sorry :(

Please help

<Grid>
        <DockPanel>
            <StackPanel>
                <Image Name="imgClientPhoto" HorizontalAlignment="Left" VerticalAlignment="Top" Width="auto" Height="auto" Grid.Column="0" Grid.Row="0" Margin="0" 
                       Source="D:ehtmp_top_left.gif" MinWidth="450" MinHeight="100" Grid.IsSharedSizeScope="True">

                </Image>

                 <Button x:Name="BrowseButton" Margin="0,13.638,30,14.362" Content="Browse" Click="BrowseButton_Click" HorizontalAlignment="Right" Width="111" />
                            <TextBox x:Name="txtBxBrowseTB" Margin="46,10,146,10" Text="TextBox" TextWrapping="Wrap" TextChanged="BrowseTB_TextChanged"></TextBox>
                            <Label HorizontalAlignment="Left" Margin="-14,22,0,10" Name="label1" Width="69.75" FontSize="13" VerticalContentAlignment="Top" HorizontalContentAlignment="Center">Path:</Label>
                        </Grid>
                    </GroupBox>
                </Grid>

            </StackPanel>

        </DockPanel>
        <DockPanel>
            <StackPanel Margin="0,158,0,0" HorizontalAlignment="Left" Width="330" Height="557.5" VerticalAlignment="Top">
                <TextBox Height="50" Name="textBox1" Width="240" Margin="0,35,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
                <ListBox Height="470" Name="listBox1" Width="332" Background="LightGray" Margin="0,0,0,0" BorderBrush="IndianRed" BorderThickness="3" />
            </StackPanel>
            <TabControl Height="234" Name="tabControl1" Width="1035" Margin="0,0,0,0">
                <TabItem Header="tabItem1" Name="tabItem1">
                    <Grid Height="144" />
                </TabItem>
            </TabControl>
        </DockPanel>
    </Grid>

Answer 1

1) The browse code should be something like this:

private void BrowseButton_Click(object sender, RoutedEventArgs e)
{
    System.Windows.Forms.FolderBrowserDialog browse = new System.Windows.Forms.FolderBrowserDialog();
    browse.RootFolder= Environment.SpecialFolder.MyDocuments;
    browse.SelectedPath = "C:\\InitalFolder\\SomeFolder";
    if (browse.ShowDialog() == System.Windows.Forms.DialogResult.OK)
    {
        txtBxBrowseTB.Text = browse.SelectedPath;
    }
}

2) I have tried to simplify the xaml. Does this look like something you could go with?:

<Grid>
    <Image Name="imgClientPhoto" Margin="0" Height="262" VerticalAlignment="Top" HorizontalAlignment="Left" ></Image>
    <StackPanel VerticalAlignment="Stretch" >
        <StackPanel VerticalAlignment="Top" Orientation="Horizontal" Height="30">
            <Button Name="BrowseButton" Content="Browse" Click="BrowseButton_Click" HorizontalAlignment="Right" Width="111" />
            <Label Name="label1" Width="69.75" FontSize="13" VerticalContentAlignment="Center" HorizontalContentAlignment="Right">Path:</Label>
            <TextBox Name="txtBxBrowseTB" Width="200" Text="TextBox" VerticalContentAlignment="Center" TextWrapping="Wrap" TextChanged="BrowseTB_TextChanged"></TextBox>
        </StackPanel>
        <StackPanel>
            <StackPanel Orientation="Vertical">
                <TextBox Height="50" Name="textBox1"  />
                <ListBox Height="470" Name="listBox1" Background="LightGray" Margin="0,0,0,0" BorderBrush="IndianRed" BorderThickness="3" MouseLeftButtonUp="listBox1_MouseLeftButtonUp">
                    <ListBoxItem>User1</ListBoxItem>
                    <ListBoxItem>User2</ListBoxItem>
                    <ListBoxItem>User3</ListBoxItem>
                    <ListBoxItem>User4</ListBoxItem>
                </ListBox>
            </StackPanel>
            <TabControl Name="tabControl1" />
        </StackPanel>
    </StackPanel>
</Grid>

You can also have a close button in the tab item Header. As many of the content properties in xaml controls, the content can actually be controls, and not necessary just a text.

        <TabControl Name="tabControl1"  >
            <TabItem Name="tabItem1" >
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Label>TabHeader1</Label>
                        <Button Height="20" Width="20" FontWeight="Bold" Click="CloseTabButton_Click">X</Button>
                    </StackPanel>
                </TabItem.Header>
                <Grid Height="144">
                    <ListView />
                </Grid>
            </TabItem>
        </TabControl>

3) Here is how you would add the tabs in C# dynamically:

private void listBox1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    //Get selected item
    ListBoxItem item = (ListBoxItem)listBox1.SelectedItem;
    string itemText = item.Content.ToString();

    //Check if item is already added
    foreach (TabItem tItem in tabControl1.Items)
    {
        if ((string)tItem.Tag == itemText)
        {
            //Item already added, just activate the tab
            tabControl1.SelectedItem = tItem;
            return;
        }
    }

    //Build new tab item
    TabItem tabItem = new TabItem();
    tabItem.Tag = itemText;

    //First build the Header content
    Label label = new Label();
    Button button = new Button();
    label.Content = itemText;
    button.Content = "X";
    button.Height = 20;
    button.Width = 20;
    button.FontWeight = FontWeights.Bold;
    button.Click += CloseTabButton_Click; //Attach the event click method
    button.Tag = tabItem; //Reference to the tab item to close in CloseTabButton_Click
    StackPanel panel = new StackPanel();
    panel.Orientation = Orientation.Horizontal;
    panel.Children.Add(label);
    panel.Children.Add(button);
    tabItem.Header = panel;

    //Then build the actual tab content
    //If you need only the ListView in here, you don't need a grid
    ListView listView = new ListView();
    //TODO: Populate the listView with what you need
    tabItem.Content = listView;

    //Add the finished tabItem to your TabControl
    tabControl1.Items.Add(tabItem);
    tabControl1.SelectedItem = tabItem; //Activate the tab
}

private void CloseTabButton_Click(object sender, RoutedEventArgs e)
{
    //The tab item was set to button.Tag when it was added
    Button button = (Button)sender;
    TabItem tabItem = (TabItem)button.Tag;
    if (tabItem != null)
    {
        button.Click -= CloseTabButton_Click; //Detach event handler to prevent memory leak
        tabControl1.Items.Remove(tabItem);
    }
}