how to align the button right under this stackpanel, how to use set the button in code

chun liu 21 Reputation points
2021-08-16T07:21:35.833+00:00

<Window x:Class="WpfApplication1.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="Window2" Height="300" Width="300">
<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}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
<Button Content="My Button..."/>
</StackPanel>

                        <Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                            <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
                            <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                            <Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
                            <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                            <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                            <Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
                            <Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
                            <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                            <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                            <Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel>
    <TabControl Style="{DynamicResource TabControlStyle1}">
        <TabItem Header="1"/>
        <TabItem Header="2"/>
    </TabControl>
</StackPanel>

</Window>

Developer technologies Windows Presentation Foundation
Developer technologies XAML
{count} votes

Accepted answer
  1. Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff
    2021-08-18T10:00:11.427+00:00

    To find an element within the template after the template has been applied, you can call the FindName method of the Template. I update your code as follows. For more information, you can also refer here.

    The code of MainWindow.xaml.cs:

    private void Button_Click(object sender, RoutedEventArgs e)  
        {  
          Button btnContent = (Button)tabControl.Template.FindName("testBtn", tabControl);  
          MessageBox.Show(btnContent.GetValue(Button.ContentProperty).ToString());  
        }  
    

    Button in ControlTemplate:

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"  Grid.Column="0">  
             <Button Name="testBtn" Content="My Button..."/>  
    </StackPanel>  
    

    Give TabControl a name and add a button:

    <StackPanel>  
            <TabControl Name="tabControl" Style="{DynamicResource TabControlStyle1}">  
                <TabItem Header="1"/>  
                <TabItem Header="2"/>  
            </TabControl>  
            <Button Content="click" Click="Button_Click"></Button>  
        </StackPanel>  
    

    The pricture of result:
    124258-4.gif


    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

3 additional answers

Sort by: Most helpful
  1. Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff
    2021-08-17T02:38:37.267+00:00

    You could try to refer to the following two methods to set the button to the right alignment.
    method one : I update your code as follows.

    <StackPanel Orientation="Horizontal" Grid.Column="0">  
              <TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>  
    </StackPanel>  
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"  Grid.Column="0">  
              <Button Content="My Button..."/>  
    </StackPanel>  
    

    method two: If you could use DockPanel, you can also use the following code.

    <DockPanel >  
              <TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>  
               <Button  HorizontalAlignment="Right" Content="My Button..."/>  
    </DockPanel>  
    

    StackPanel arranges child elements into a single row (vertical or horizontal), while DockPanel defines an area in which you can arrange child elements horizontally or vertically, relative to each other (Dock property changes the position of elements relative to other elements in the same container. Alignment properties, such as HorizontalAlignment, change the position of an element relative to its parent element).

    The result is shown in the figure:
    123795-3.png

    0 comments No comments

  2. chun liu 21 Reputation points
    2021-08-17T04:11:13.917+00:00

    hi,LuiLiu-MSFT
    Thandk you for quickly reply.
    how to call the button by name or else?
    < stackpanel>
    <Button Name="testBtn">
    </stackPannel>

    it 's got no find the button by name under the templete


  3. chun liu 21 Reputation points
    2021-08-19T01:28:00.68+00:00

    ok, thanks a lot. i gotta it.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.