question

chunliu-9482 avatar image
0 Votes"
chunliu-9482 asked chunliu-9482 answered

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

<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>

windows-wpfdotnet-wpf-xaml
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,@ chunliu-9482. How do you want to align the buttons? Which control does the Button align with? What layout do you want to set?

0 Votes 0 ·

try to set the Button HorizionAlignment = Right ,but no effects...

<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>

i

0 Votes 0 ·
HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered HuiLiu-MSFT edited

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.



4.gif (54.8 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered HuiLiu-MSFT edited

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






3.png (4.2 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

chunliu-9482 avatar image
0 Votes"
chunliu-9482 answered HuiLiu-MSFT commented

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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

chunliu-9482 avatar image
0 Votes"
chunliu-9482 answered

ok, thanks a lot. i gotta it.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.