Develop Reference

WPF/C# vertical Accordion control another way? [duplicate]

This question already has answers here:
WPF Clipping Problem
(2 answers)
WPF Transformations -- Rotating and switching width/height?
(3 answers)
Closed 5 years ago.
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

Xaml Scrollviewer not showing the full Grid content

I made a product page but the scrollviewer does not show everything that is in that grid. I have a feeling that is has something to do with my row definitions I hope someone can help me
XAML:
<Page
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="729.552">
<Page.Resources>
</Page.Resources>
<Grid x:Name="LayoutRoot" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData2.xaml}" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<!--TODO: Content should be placed within the following grid-->
<Grid x:Name="ContentPanel" HorizontalAlignment="Left" VerticalAlignment="Top">
<Pivot x:Name="ProductHub" HorizontalAlignment="Left" VerticalAlignment="Top">
<PivotItem x:Name="ProductPivot" Header="Item" DataContext="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="680">
<ScrollViewer Width="336" Height="670" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Grid x:Name="ContentGrid" Height="auto" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" MinHeight="278"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="auto" MinHeight="251"/>
<RowDefinition Height="77*"/>
<RowDefinition Height="34*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="TBlockTitle" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding result.item.title}" VerticalAlignment="Top" Height="20" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData.xaml}"/>
<Image x:Name="ImageProduct" HorizontalAlignment="Left" Height="160" Margin="10,49,0,0" VerticalAlignment="Top" Width="316" Stretch="Fill" Source="{Binding result.item.images.Item330}" Tapped="ImgProduct_Click" />
<TextBlock x:Name="BtnFavorite" HorizontalAlignment="Left" Margin="10,214,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontFamily="Segoe MDL2 Assets" FontSize="20" Height="20" Width="20" />
<TextBlock x:Name="TBlockHiddenSEO" HorizontalAlignment="Left" Margin="298,10,-6,0" TextWrapping="Wrap" Text="{Binding result.item.seo_name}" VerticalAlignment="Top" Opacity="0" Height="40" Width="44"/>
<TextBlock x:Name="textBlockCurrency" HorizontalAlignment="Left" Margin="192,218,0,0" TextWrapping="Wrap" Text="{Binding result.item.currency_symbol}" VerticalAlignment="Top" Height="20" Width="8"/>
<TextBlock x:Name="textBlockPrice" HorizontalAlignment="Left" Margin="205,218,0,0" TextWrapping="Wrap" Text="{Binding result.item.price}" VerticalAlignment="Top" Height="20" Width="28"/>
<TextBlock x:Name="textBlockLookAmmount" HorizontalAlignment="Left" Margin="10,258,0,0" TextWrapping="Wrap" Text="{Binding result.item.views}" VerticalAlignment="Top" Height="20" Width="16" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData.xaml}"/>
<TextBlock x:Name="textBlockWatchedText" HorizontalAlignment="Left" Margin="31,258,0,0" TextWrapping="Wrap" Text="x bekeken sinds" VerticalAlignment="Top" Height="20" Width="105"/>
<TextBlock x:Name="textBlockDate" HorizontalAlignment="Left" Margin="141,258,0,0" TextWrapping="Wrap" Text="{Binding result.item.placed}" VerticalAlignment="Top" Height="20" Width="81" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData.xaml}"/>
<StackPanel x:Name="StPanelUser" Grid.Row="1" Margin="0,10,0,20"/>
<TextBlock x:Name="textBlockDescription" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding result.item.description}" VerticalAlignment="Top" Width="316" Grid.Row="1"/>
<TextBlock x:Name="textBlockShipping" HorizontalAlignment="Left" Margin="10,1,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Shipping" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockState" HorizontalAlignment="Left" Margin="10,26,0,0" Grid.Row="2" TextWrapping="Wrap" Text="State" VerticalAlignment="Top" Height="20" Width="59"/>
</Grid>
</ScrollViewer>
</PivotItem>
</Pivot>
</Grid>
<ProgressRing HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="ProgressRing"/>
</Grid>
Thank you

I'm pretty sure, that the parent element of your scrollviewer has a smaller height than the scrollviewer itself - the height of the scrollviewer sets the height of the control, not the heigh of the content...
As consequence, if the scrollviewer is 200px greater than the parent control - the last 200px of the scrollviewer are cut off

Remove Height="670" in the ScrollViewer. If you set the height for a ScrollViewer, then it displays the controls that fits in the given height
<ScrollViewer Width="336" HorizontalAlignment="Left" VerticalAlignment="Top" >
....
....
</ScrollViewer>
.
<Window x:Class="minimizeApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid >
<ScrollViewer Width="336" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Grid x:Name="ContentGrid" Height="auto" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" MinHeight="278"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="auto" MinHeight="251"/>
<RowDefinition Height="77*"/>
<RowDefinition Height="34*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="TBlockTitle" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="title" VerticalAlignment="Top" Height="20" />
<Image x:Name="ImageProduct" HorizontalAlignment="Left" Height="160" Margin="10,49,0,0" VerticalAlignment="Top" Width="316" Stretch="Fill" Source="Images/graph1.jpg" />
<TextBlock x:Name="BtnFavorite" HorizontalAlignment="Left" Margin="10,214,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontFamily="Segoe MDL2 Assets" FontSize="20" Height="20" Width="20" />
<TextBlock x:Name="TBlockHiddenSEO" HorizontalAlignment="Left" Margin="298,10,-6,0" TextWrapping="Wrap" Text="name" VerticalAlignment="Top" Opacity="0" Height="40" Width="44"/>
<TextBlock x:Name="textBlockCurrency" HorizontalAlignment="Left" Margin="192,218,0,0" TextWrapping="Wrap" Text="currency" VerticalAlignment="Top" Height="20" Width="8"/>
<TextBlock x:Name="textBlockPrice" HorizontalAlignment="Left" Margin="205,218,0,0" TextWrapping="Wrap" Text="price" VerticalAlignment="Top" Height="20" Width="28"/>
<TextBlock x:Name="textBlockLookAmmount" HorizontalAlignment="Left" Margin="10,258,0,0" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="16" />
<TextBlock x:Name="textBlockWatchedText" HorizontalAlignment="Left" Margin="31,258,0,0" TextWrapping="Wrap" Text="x bekeken sinds" VerticalAlignment="Top" Height="20" Width="105"/>
<TextBlock x:Name="textBlockDate" HorizontalAlignment="Left" Margin="141,258,0,0" TextWrapping="Wrap" Text="placed" VerticalAlignment="Top" Height="20" Width="81" />
<StackPanel x:Name="StPanelUser" Grid.Row="1" Margin="0,10,0,20"/>
<TextBlock x:Name="textBlockDescription" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="description" VerticalAlignment="Top" Width="316" Grid.Row="1"/>
<TextBlock x:Name="textBlockShipping" HorizontalAlignment="Left" Margin="10,1,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Shipping" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockState" HorizontalAlignment="Left" Margin="10,26,0,0" Grid.Row="2" TextWrapping="Wrap" Text="State" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockpayment" HorizontalAlignment="Left" Margin="10,51,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Payment" VerticalAlignment="Top" Height="20" Width="72"/>
<TextBlock x:Name="textBlockType" HorizontalAlignment="Left" Margin="10,76,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Type" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockRole" HorizontalAlignment="Left" Margin="10,101,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Role" VerticalAlignment="Top" Height="20" Width="59"/>
<TextBlock x:Name="textBlockShipping_FillIn" HorizontalAlignment="Left" Margin="141,1,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockState_FillIn" HorizontalAlignment="Left" Margin="141,26,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockpayment_FillIn" HorizontalAlignment="Left" Margin="141,51,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockType_FillIn" HorizontalAlignment="Left" Margin="141,76,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockRole_FillIn" HorizontalAlignment="Left" Margin="141,101,0,0" Grid.Row="2" TextWrapping="Wrap" Text="1323" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockAdvertiser" HorizontalAlignment="Left" Margin="10,149,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Adverteerder" VerticalAlignment="Top" Height="20" Width="87"/>
<TextBlock x:Name="textBlockLocation" HorizontalAlignment="Left" Margin="10,174,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Locatie" VerticalAlignment="Top" Height="20" Width="87"/>
<TextBlock x:Name="textBlockPhone" HorizontalAlignment="Left" Margin="10,231,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Telefoon" VerticalAlignment="Top" Height="20" Width="87"/>
<TextBlock x:Name="textBlockAdvertiser_FillIn" HorizontalAlignment="Left" Margin="141,149,0,0" Grid.Row="2" TextWrapping="Wrap" Text="name" VerticalAlignment="Top" Height="20" Width="37"/>
<TextBlock x:Name="textBlockLocation_FillIn" HorizontalAlignment="Left" Margin="141,174,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="8"/>
<TextBlock x:Name="textBlockProvince_FillIn" HorizontalAlignment="Left" Margin="141,199,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
<TextBlock x:Name="textBlockPhone_FillIn" HorizontalAlignment="Left" Margin="141,231,0,0" Grid.Row="2" TextWrapping="Wrap" Text="phone" VerticalAlignment="Top" Height="20"/>
</Grid>
</ScrollViewer>
</Grid>
</Window>

LongListSelector ItemTemplate not growing

I have an itemtemplate with just two texts blocks in it but when a text block is growing because of a word wrap, the itemtemplate grid is not growing.
How can I do that ? Thanks for your help !
<DataTemplate x:Key="ArtistTemplate">
<Grid Height="60" Width="436">
<Grid.RowDefinitions>
<RowDefinition Height="auto" MinHeight="34" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Name}" Margin="10,0" Foreground="White" FontSize="26" FontWeight="Bold" Height="34" VerticalAlignment="Top"/>
<TextBlock TextWrapping="Wrap" Text="{Binding NbAlbum, Converter={StaticResource Converters_IntToStringWithNbAlbum}}" Margin="10,0,10,-21" Foreground="White" FontSize="12" Height="16" VerticalAlignment="Bottom" Grid.Row="1"/>
</Grid>
</DataTemplate>

Set the height of grid to "Auto".
<Grid Height="Auto" Width="436">
<Grid.RowDefinitions>
<RowDefinition Height="auto" MinHeight="34" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Name}" Margin="10,0" Foreground="White" FontSize="26" FontWeight="Bold" Height="34" VerticalAlignment="Top"/>
<TextBlock TextWrapping="Wrap" Text="{Binding NbAlbum, Converter={StaticResource Converters_IntToStringWithNbAlbum}}" Margin="10,0,10,-21" Foreground="White" FontSize="12" Height="16" VerticalAlignment="Bottom" Grid.Row="1"/>
</Grid>

WindowsPhone ListBox increase height during scrolling in my emulator and device as well

WindowsPhone ListBox increase height during scrolling in my emulator and device as well.I'm using Stack Panel inside ListBox .
This is myxaml code.
<DataTemplate x:Name="LstContentTemplate">
<ListBoxItem HorizontalAlignment="Left" BorderThickness="1" Width="480" BorderBrush="Black" >
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="{Binding Path=Groupname}" Style="{StaticResource PhoneTextNormalStyle}" FontSize="20" FontFamily="Arial" Foreground="Black" HorizontalAlignment="Left" Name="txtgroupname" VerticalAlignment="Top" Width="480" />
</Grid>
<Grid Grid.Row="1">
<TextBlock Text="{Binding Path=Name}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Foreground="Black" FontSize="22" HorizontalAlignment="Left" Name="txtname" VerticalAlignment="Top" Width="480" />
</Grid>
<Grid Grid.Row="2">
<TextBlock Text="{Binding Path=Mobile}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Foreground="Black" FontSize="22" HorizontalAlignment="Left" Name="txtmobile" VerticalAlignment="Top" Width="480" />
</Grid>
</Grid>
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Ya I got the Solution of that problem , I've visibility Collapsed of those TextBlock in which there is not txet during binding, through a Converter so that TextBlock doesn't occupies there space on list....

Windows phone7 Interface design in Silverlight

In my Windows phone7 silverlight Application I have several textblock pairs to display some dynamic data in run time.
For example
Name: TextBlock[Dynamically_loading_Name] <-----------------(A)
Address: TextBlock[Dynamically_loading_Asddress] <--------------(B)
Phone: TextBlock[Dynamically_loading_Phone] <-----------------(C)
Since I don't know how long the dynamic data, to The textBlocks(A, B, C), I have gave properties Height=Auto and TextWrapping=Wrap.
The problem is when data loaded to the A,B,C textBlocks they are overlapping.If I can give the margin to relative to the other textBlock I think it will be ok. By dafault margin to counts from the top of the page.
I added StackPanels to each row and Gave stackPanel height property=Auto Also. Still it overlaps when the upper record is too lengthy.
If Someone can help me to overcome this issue it a big help. Thanks
Edits................................................................
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Height="Auto" HorizontalAlignment="Left" Margin="9,20,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="441">
<TextBlock Height="30" Name="txt_Title" Text="Title:" Width="90" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Height="Auto" Name="item_Title" Text="TextBlock" Width="330" TextWrapping="Wrap" />
</StackPanel>
<StackPanel Height="Auto" HorizontalAlignment="Left" Margin="9,83,0,0" Name="stackPanel2" VerticalAlignment="Top" Width="441">
<TextBlock Height="30" Name="txt_Link" Text="Link:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_Link" Text="TextBlock" Width="306" TextWrapping="Wrap" Padding="0" />
</StackPanel>
<StackPanel Height="Auto" HorizontalAlignment="Right" Margin="0,146,8,0" Name="stackPanel3" VerticalAlignment="Top" Width="439">
<TextBlock Height="30" Name="txt_Description" Text="Description:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_Description" Text="TextBlock" TextWrapping="Wrap" Width="305" />
</StackPanel>
<StackPanel Height="Auto" HorizontalAlignment="Left" Margin="9,209,0,0" Name="stackPanel4" VerticalAlignment="Top" Width="439">
<TextBlock Height="30" Name="txt_Comment" Text="Comment:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_Comment" Text="TextBlock" TextWrapping="Wrap" Width="305" />
</StackPanel>
<StackPanel Height="Auto" HorizontalAlignment="Left" Margin="6,272,0,0" Name="stackPanel5" VerticalAlignment="Top" Width="444">
<TextBlock Height="30" Name="txt_PubDate" Text="Published_Date:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_PubDate" Text="TextBlock" TextWrapping="Wrap" Width="307" />
</StackPanel>
<StackPanel HorizontalAlignment="Left" Margin="6,335,0,239" Name="stackPanel6" Width="444">
<TextBlock Height="30" Name="txt_Creator" Text="Creator: " HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="Auto" Name="item_creator" Text="TextBlock" TextWrapping="Wrap" Width="305" />
</StackPanel>
</Grid>

I think all you need is a Grid. Just need to make the Heights auto sized. Also, you might want to always apply a style to your TextBlock to have consistant margins.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txt_Title" Text="Title:" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_Title" Text="This is a very long title and I have no idea how long it will be" TextWrapping="Wrap" Grid.Column="1" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_Link" Text="Link:" d:LayoutOverrides="Width" Grid.Row="1" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_Link" Text="This could be long too..." TextWrapping="Wrap" Padding="0" Grid.Column="1" Grid.Row="1" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_Description" Text="Description:" Grid.Row="2" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_Description" Text="This will be very very very very very very very very very very very very very very very very very very long..." TextWrapping="Wrap" Grid.Column="1" Grid.Row="2" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_Comment" Text="Comment:" Grid.Row="3" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_Comment" Text="TextBlock" TextWrapping="Wrap" Grid.Column="1" Grid.Row="3" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_PubDate" Text="Published_Date:" Grid.Row="4" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_PubDate" Text="TextBlock" TextWrapping="Wrap" Grid.Column="1" Grid.Row="4" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="txt_Creator" Text="Creator: " Grid.Row="5" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="item_creator" Text="TextBlock" TextWrapping="Wrap" Grid.Column="1" Grid.Row="5" Style="{StaticResource PhoneTextNormalStyle}" />
</Grid>

See if this forum post can help you out. Basically try setting MaxWidth property of the stackpanel if everything else fails ;)
http://forums.silverlight.net/t/58227.aspx/1?Why+TextBlock+doesn+t+wrap+even+I+set+TextWrapping+to+Wrap+
Hope this helps.

I wouldn't use one grid cell and several margins for all items. If you use a StackPanel instead of the Grid, the arrangement should be fine.
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
</StackPanel>
<StackPanel Orientation="Horizontal">
</StackPanel>
</StackPanel>
Edit:
I made a sample project which looks good for me, but I'm not sure if I really got your problem. The first title does not wrap as it has a fixed height, but the second does as the height isn't set. All Stackpanels adjust their sizes as they should.
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Height="30" Width="90" TextWrapping="Wrap" Text="Title does not wrap" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Width="330" TextWrapping="Wrap" Text="TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Width="90" TextWrapping="Wrap" Text="Title wraps" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Width="330" TextWrapping="Wrap" Text="TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText" />
</StackPanel>
</StackPanel>