I try to do the horizontal accordion control to be a vertical control. So I used a simple trick
<Controls:Accordion.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1"/>
<RotateTransform Angle="90"/>
</TransformGroup>
</Controls:Accordion.RenderTransform>
This is working fine, but the problem comes now. When I resize the window or an element in the accordion control its all get broken. Its all change width is height and height is the width, but I'm not sure how to fix it.
I hope someone has an idea.
My whole code from Xaml
<Window
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:WIHAAccordionTemplate"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit" x:Class="WIHAAccordionTemplate.MainWindow"
mc:Ignorable="d"
Title="MainWindow"
x:Name="parentControl"
Height="auto"
Width="auto"
WindowStartupLocation="CenterOwner"
WindowStyle="SingleBorderWindow"
SizeChanged="parentControl_SizeChanged"
Background="Green">
<Grid x:Name="childControl" Width="auto" Height="auto" SizeChanged="parentControl_SizeChanged">
<Controls:Accordion x:Name="AccordionControlTemplate" HorizontalAlignment="Center" Margin="0,0,0,0" MinHeight="500" MinWidth="300" Height="auto" Width="auto" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" SizeChanged="parentControl_SizeChanged">
<Controls:Accordion.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1"/>
<RotateTransform Angle="90"/>
</TransformGroup>
</Controls:Accordion.RenderTransform>
<Controls:AccordionItem x:Name="configItem" Header="Config" Style="{DynamicResource AccordionItemHeaderStyle}">
<Grid x:Name="configItemGrid" Style="{StaticResource GridStyleAccordion}">
</Grid>
</Controls:AccordionItem>
<Controls:AccordionItem x:Name="parkingstationItem" Header="Parkingstation" Style="{DynamicResource AccordionItemHeaderStyle}">
<Grid x:Name="parkingStationItemGrid" Style="{StaticResource GridStyleAccordion}">
</Grid>
</Controls:AccordionItem>
<Controls:AccordionItem x:Name="addNewUserItem" Header="add new User" Width="auto" Height="auto" Style="{DynamicResource AccordionItemHeaderStyle}" >
<Grid x:Name="addNewUserItemGrid" Style="{StaticResource GridStyleAccordion}" >
<Grid x:Name="userNew" MinWidth="200" MinHeight="200" Style="{StaticResource GridPosition}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform Angle="270"/>
</TransformGroup>
</Grid.RenderTransform>
<Label x:Name="nameN" Content="Benutzer:" HorizontalAlignment="Left" Margin="23,23,0,0" VerticalAlignment="Top" FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold"/>
<Label x:Name="operatorIDN" Content="OperatorID:" HorizontalAlignment="Left" Margin="11,50,0,0" VerticalAlignment="Top" FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold"/>
<Label x:Name="deviceIDN" Content="DeviceID:" HorizontalAlignment="Left" Margin="23,81,0,0" VerticalAlignment="Top" FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold"/>
<Label x:Name="passwortN" Content="Passwort:" HorizontalAlignment="Left" Margin="21,110,0,0" VerticalAlignment="Top" FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold"/>
<Label x:Name="aktivN" Content="Aktiv:" HorizontalAlignment="Left" Margin="45,139,0,0" VerticalAlignment="Top" FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold"/>
<TextBox x:Name="userTextBox" HorizontalAlignment="Left" Height="23" Margin="140,24,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="120" FontFamily="{DynamicResource WihaFontFamaly}"/>
<TextBox x:Name="operatorTextBox" HorizontalAlignment="Left" Height="23" Margin="140,51,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="120" FontFamily="{DynamicResource WihaFontFamaly}"/>
<TextBox x:Name="deviceTextBox" HorizontalAlignment="Left" Height="23" Margin="140,82,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="120" FontFamily="{DynamicResource WihaFontFamaly}"/>
<PasswordBox x:Name="passwordBox" HorizontalAlignment="Left" Height="23" Margin="140,111,0,0" VerticalAlignment="Top" Width="120"/>
<CheckBox x:Name="aktivCheckBox" HorizontalAlignment="Left" Margin="140,145,0,0" VerticalAlignment="Top"/>
<Button x:Name="button" Content="Save" Click="button_Click" HorizontalAlignment="Left" Margin="61,175,0,0" VerticalAlignment="Top" Style="{DynamicResource ButtonStyleWIHA}" />
</Grid>
</Grid>
</Controls:AccordionItem>
<Controls:AccordionItem x:Name="userPanelItem" Header="User Panel" Style="{DynamicResource AccordionItemHeaderStyle}" IsSelected="True">
<Grid x:Name="userPanelItemGrid" Style="{StaticResource GridStyleAccordion}" >
<DataGrid x:Name="userDataGrid" CanUserReorderColumns="True" CanUserResizeColumns="True" CanUserResizeRows="True" RowDetailsVisibilityMode="VisibleWhenSelected" IsReadOnly="True" AlternatingRowBackground="{DynamicResource WihaGrauB}" ColumnWidth="auto" ColumnHeaderHeight="30" AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="0,401,-111,-304" Width="auto" Height="auto">
<DataGrid.RenderTransform>
<TransformGroup>
<RotateTransform Angle="270"/>
</TransformGroup>
</DataGrid.RenderTransform>
<DataGrid.Columns>
<DataGridTextColumn Header="Benutzer" Binding="{Binding Name}" MinWidth="150" Width="auto" />
<DataGridTextColumn Header="OperatorID" Binding="{Binding OperatorID}" MinWidth="200" Width="auto"/>
<DataGridCheckBoxColumn Header="Aktiv" Binding="{Binding Aktiv}" MinWidth="50" Width="auto"/>
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DockPanel>
<Image DockPanel.Dock="Left" Source="{Binding ImageUrl}" Height="30" Width="25" Margin="10,0,0,0"/>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Name: " FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold" Grid.Row="1" Margin="2,2,2,2"/>
<TextBox Text="{Binding Name}" Grid.Column="1" Width="150" TextAlignment="Center" HorizontalAlignment="Left" Grid.Row="1" Margin="2,2,2,2" />
<TextBlock Text="OperatorID: " FontFamily="{DynamicResource WihaFontFamaly}" Grid.Row="2" FontWeight="Bold" Margin="2,2,2,2"/>
<TextBox x:Name="operatorText" Text="{Binding OperatorID}" Width="150" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="2" TextAlignment="Center" Margin="2,2,2,2" />
<TextBlock Text="DeviceID: " FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold" Grid.Row="3" Margin="2,2,2,2"/>
<TextBox Text="{Binding DeviceID}" Grid.Column="3" Width="150" HorizontalAlignment="Left" Grid.Row="3" TextAlignment="Center" Margin="2,2,2,2"/>
<TextBlock Text="Passwort: " FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold" Grid.Row="4" Margin="2,2,2,2"/>
<TextBox Text="{Binding Passwort}" Grid.Column="4" Width="150" HorizontalAlignment="Left" Grid.Row="4" TextAlignment="Center" Margin="2,2,2,2"/>
<TextBlock Text="Aktiv:" FontWeight="Bold" FontFamily="{DynamicResource WihaFontFamaly}" Grid.Row="5" Margin="2,2,2,2"/>
<CheckBox Grid.Column="5" Grid.Row="5" IsChecked="{Binding Aktiv}" Margin="2,2,2,2" />
</Grid>
</DockPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</Grid>
</Controls:AccordionItem>
<Controls:AccordionItem x:Name="userloginItem" Width="auto" Height="auto" Header="Login" Style="{DynamicResource AccordionItemHeaderStyle}" >
<Grid x:Name="userLoginItemGrid" Style="{StaticResource GridStyleAccordion}">
<Grid x:Name="userLogin" Height="auto" Width="auto" Style="{StaticResource GridPosition}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform Angle="270"/>
</TransformGroup>
</Grid.RenderTransform>
<TextBox x:Name="usernameLoginTextBox" HorizontalAlignment="Center" Height="23" Margin="20,54,22,88" TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="120"/>
<Button x:Name="loginButton" Content="Login" Click="button_Click" HorizontalAlignment="Left" Margin="20,140,0,0" VerticalAlignment="Top" Style="{DynamicResource ButtonStyleWIHA}"/>
<PasswordBox x:Name="loginPasswordBox" HorizontalAlignment="Left" Margin="20,101,0,0" Width="120" Height="23" VerticalAlignment="Top"/>
<Label x:Name="label" Content="Benutzername:" HorizontalAlignment="Left" Margin="20,38,0,0" VerticalAlignment="Top" FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold"/>
<Label x:Name="label1" Content="Passwort:" HorizontalAlignment="Left" Margin="20,85,0,0" VerticalAlignment="Top" FontFamily="{DynamicResource WihaFontFamaly}" FontWeight="Bold"/>
</Grid>
</Grid>
</Controls:AccordionItem>
</Controls:Accordion>
</Grid>
and at the moment it looks like this how it looks
