Vertical alignment for elements within a StackPanel WP C#

Question

I'm absolute beginner with WindowsPhone development and C#. Actually, i am developing a app and i need render a horizontal chart bar. I'm trying do this using a LisBox, and inside that i put a StackPanel. This work fine, but the vertical alignment is wrong. I want the elements inside the StackPanel stay aligned on the Bottom, like the image.

My code:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto"
                            ItemsSource="{Binding HistoricData.HistoricoList}">

                            <ListBox.ItemsPanel>

                                <ItemsPanelTemplate>

                                    <StackPanel Orientation="Horizontal" />

                                </ItemsPanelTemplate>

                            </ListBox.ItemsPanel>

                            <ListBox.ItemTemplate>

                                <DataTemplate>

                                    <StackPanel Orientation="Vertical"
                                                    Width="80"
                                                Height="450"
                                                Margin="12 0 0 0"
                                                VerticalAlignment="Bottom">

                                        <TextBox 
                                                Text="{Binding UnidadeConsumido}" 
                                                FontSize="18" 
                                                HorizontalAlignment="Center"
                                            Margin="0 0 0 0"/>

                                        <Rectangle 
                                                    Fill="{StaticResource MeuVivoMainContrastBrush}" 
                                                    Width="80"
                                                    Height="{Binding Consumo}" 
                                            VerticalAlignment="Bottom"/>

                                        <TextBox 
                                                    Text="{Binding Periodo}" 
                                                    MaxWidth="120" 
                                                    TextWrapping="Wrap" 
                                                    FontSize="21" 
                                                    HorizontalAlignment="Center" 
                                                    Foreground="#FF616161"
                                            VerticalAlignment="Bottom"/>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

Someone can help me?

Answer 1

Create a Style for your listbox and set VerticalContentAlignment to Bottom. And then apply your Style to your ListBox, as shown below.

XAML:

<Window.Resources>
    <SolidColorBrush x:Key="ListBox.Static.Background" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="ListBox.Static.Border" Color="#FFABADB3"/>
    <SolidColorBrush x:Key="ListBox.Disabled.Background" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="ListBox.Disabled.Border" Color="#FFD9D9D9"/>
        <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
        <Setter Property="Background" Value="{StaticResource ListBox.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ListBox.Static.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
                        <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Border}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsGrouping" Value="true"/>
                                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemsSource="{Binding Mode=OneWay}" Style="{DynamicResource ListBoxStyle1}">
        <ListBox.DataContext>
            <local:MyDataCollection/>
        </ListBox.DataContext>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding UnidadeConsumido}"></TextBlock>
                    <Rectangle Fill="BlueViolet" Height="{Binding Consumo}"></Rectangle>
                    <TextBlock Text="{Binding Periodo}"></TextBlock>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

Result:

Answer 2

Try the StackPanel without setting the Height. Then it will be as high as its content needs it to be and the VerticalAlignment (of the StackPanel) can take effect.