WinRT Listview Scrolling Not Working in Grid - xaml

Okay so I have a parent grid, where three other grid resides in it. Problem is I've a Listview inside the last one. In this grid the listview items scrolling doesn't work. But if I move the same listview in the middle grid the scrolling works exactly as i want. What am I missing here? How can I make this Listview Scrolling work in the last grid. Here is the code snippets. TIA
<Grid x:Name="Container" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="HambugerMenuStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3">
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="HamburgerCloseState"/>
<VisualState x:Name="HamburgerOpenState">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="380" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetX)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="480" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetX)" Storyboard.TargetName="HamburerPane" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ManualDataPanelStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3">
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="ManualDataPanelCloseState"/>
<VisualState x:Name="ManualDataPanelOpenState">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetY)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-380" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetX)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-460" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetX)" Storyboard.TargetName="ManualDataPane" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HamburerPane"
Margin="-480,0,0,0">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Width="400" HorizontalAlignment="Left">
<TextBlock>Hello</TextBlock>
</StackPanel>
</Grid>
<Grid x:Name="LayoutRoot">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<maps:MapControl Grid.RowSpan="3" Grid.ColumnSpan="3" x:Name="MapControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<!--<maps:MapItemsControl ItemTemplate="{StaticResource MapControlDataTemplate}" ItemsSource="{Binding}" >
</maps:MapItemsControl>-->
</maps:MapControl>
<Slider x:Name="RotationSlider" Grid.Row="0" Grid.Column="1" Maximum="360" Value="{Binding Heading, ElementName=MapControl, Mode=TwoWay}" ></Slider>
<Slider x:Name="PitchSlider" Grid.Row="1" Grid.Column="2" Orientation="Vertical" Maximum="65" Value="{Binding DesiredPitch, ElementName=MapControl, Mode=TwoWay}" ></Slider>
</Grid>
<Grid x:Name="ManualDataPane"
Margin="0,0,-480,0">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<ListView ItemsSource="{Binding Origins}" Height ="{Binding ElementName=ManualDataPane, Path=ActualHeight}" Width="400" HorizontalAlignment="Right">
<ListView.ItemTemplate>
<DataTemplate>
<expaControl:ExpanderControl Width="400"
ItemsSource="{Binding Intersections}"
HeaderTemplate="{StaticResource CustomHeaderTemplate}"
ItemTemplate="{StaticResource CustomItemTemplate}" IsExpanded="False" Style="{StaticResource ExpanderControlStyle}" ExpanderTemplate="{StaticResource CustomExpanderTemplate}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
This three grids are inside a parent grid. The grid.projection are just for animating the grid like the hamburger menu. No problem there.

The Row definition for the grid is Auto for the Row it is in. If a listview is put in a row with auto it will not scroll you must use either ,1,2* etc or a fixed height.

I found recently that when I put a ListView in a Container with <PlaneProjection/> the scrolling stopped working. Taking the PlaneProjection off allowed the ListView to scroll again. Is this your problem? I'm looking for a solution myself at the moment.

Related

Access ContentPresenter children for Visualstate animation

I'm using the following GridView and have an ItemTemplate with 3 Elements inside.
Now what i would like to do, is to animate the MyTextBlock opacity on PointerOver from the GridViewItem.
<GridView x:Name="MyList" ItemContainerStyle="{StaticResource GridViewItemContainerStyle}" ItemsSource="{Binding MyList}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="3" />
<RowDefinition Height="80" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Url}" />
<ProgressBar Grid.Row="1" IsIndeterminate="True" />
<TextBlock Name="MyTextBlock" Opacity="0" Text="Test" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
The ItemContainerStyle is like this. Problem is, i can't access MyTextBlock with Storyboard.TargetName="MyTextBlock" from here since it's inside the ContentPresenter.
How can i do a visualstate animation of an element inside the ContentPresenter?
<Style TargetType="GridViewItem" x:Key="GridViewItemContainerStyle">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Grid x:Name="ContentBorder" Control.IsTemplateFocusTarget="True" RenderTransformOrigin="0.5,0.5">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="BorderRectangle" Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" Opacity="0" />
<ContentPresenter x:Name="ContentPresenter" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit:
I tried using the following TargetProperty, but it's just setting the opacity of the whole ContentPresenter
and not just TextBlock inside of it.
<DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(TextBlock.Opacity)" Duration="0" To="1" />
Problem is, i can't access MyTextBlock with Storyboard.TargetName="MyTextBlock" from here since it's inside the ContentPresenter. How can i do a visualstate animation of an element inside the ContentPresenter?
You can add two visualstates inside DataTemplate(PointerEntered and PointerExited):
<GridView x:Name="MyList" Grid.Row="1" ItemContainerStyle="{StaticResource GridViewItemContainerStyle}" >
<GridView.ItemTemplate>
<DataTemplate>
<Grid PointerExited="Grid_PointerExited" PointerEntered="Grid_PointerEntered">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="PointerEntered">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyTextBlock" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerExited">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyTextBlock" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="3" />
<RowDefinition Height="80" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Url}" />
<ProgressBar Grid.Row="1" IsIndeterminate="True" />
<TextBlock Grid.Row="2" Name="MyTextBlock" Opacity="0" Text="Test" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
And using the following codes in Grid.PointerEntered and Grid.PointerExited events to get the storyboard start:
private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
{
Grid grid = sender as Grid;
var visualStateGroups = VisualStateManager.GetVisualStateGroups(grid);
var visualStateGroup = visualStateGroups[0];
visualStateGroup.States[1].Storyboard.Begin();
}
private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
{
Grid grid = sender as Grid;
var visualStateGroups = VisualStateManager.GetVisualStateGroups(grid);
var visualStateGroup = visualStateGroups[0];
visualStateGroup.States[0].Storyboard.Begin();
}
DataTemplate can come from anywhere (App Resource, Window Resource, Local Resource, Code), so it uses its own NameScope.
You are unable to use MyTextBlock because of Namescope issues. So, best would be to define VisualStates as part of DataTemplate itself.

Center the Button Text Content in a universal app

I am trying to center the text Content of a Button in Center,in my universal app,but this is what I get:
and this is my code:
<StackPanel Orientation="Vertical" >
<Border VerticalAlignment="Center" Height="40" >
<Button Background="Transparent" Content="Resultats" FontSize="16" VerticalAlignment="Stretch" Foreground="#727271" x:Name="res" Style="{Binding Source={StaticResource ButtontopStyle}}" HorizontalAlignment="Stretch" Click="res_Click" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Height="40"/>
</Border>
<StackPanel x:Name="stackVisible" Orientation="Vertical" >
<Border Margin="0" >
<Button Background="Transparent" Content="Tous les résultats" FontSize="14" VerticalAlignment="Top" Foreground="#727271" Margin="0" x:Name="ttres" Style="{Binding Source={StaticResource ButtonMenuStyle}}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Padding="10" VerticalContentAlignment="Center" Height="40"/>
</Border>
<Border>
<Button Background="Transparent" Content="Recherches Avancées" FontSize="14" VerticalAlignment="Top" Foreground="#727271" Margin="0" x:Name="rechavan" HorizontalAlignment="Stretch" Style="{Binding Source={StaticResource ButtonMenuStyle}}" HorizontalContentAlignment="Left" Padding="10" VerticalContentAlignment="Center" Height="40"/>
</Border>
</StackPanel>
</StackPanel>
I tried to use VerticalContentAlignment="Center",but like you see,I didn't get the result that I want
thanks for help
my styles for buttons:
<Style x:Key="ButtonMenuStyle" TargetType="Button">
<Setter Property="Foreground" Value="#e6e6e6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="Border" Stroke="Transparent" Fill="Transparent" Margin="0"/>
<ContentPresenter x:Name="Content"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtontopStyle" TargetType="Button">
<Setter Property="Foreground" Value="#e6e6e6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" />
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="Button" Stroke="Transparent" Fill="Transparent" Margin="0"/>
<ContentPresenter x:Name="Content"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You're putting too much effort into it, and most likely the ButtonMenuStyle has something that messes up your layout. By default the content of a Button is vertically centered.
I've thrown out all your unnecessary alignments, unnecessary borders (and you could even remove the inner StackPanel as well). I've also changed the font size to 8 on one button to show multiple sizes to prove they're all aligned correctly.
<StackPanel Orientation="Vertical">
<Button Background="Transparent" Content="Resultats" FontSize="16" VerticalAlignment="Stretch" Foreground="#727271" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Height="40"/>
<StackPanel Orientation="Vertical" >
<Button Background="Transparent" Content="Tous les résultats" FontSize="14" Foreground="#727271" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Height="40"/>
<Button Background="Transparent" Content="Recherches Avancées" FontSize="8" Foreground="#727271" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Height="40" />
</StackPanel>
</StackPanel>
Edit: as you posted your styles, I looked into them. I'd strongly advise against using them (as they break several things), but if you really want to use them, you should change your ContentPresenter too:
<ContentPresenter x:Name="Content" VerticalContentAlignment="Center" Content="{TemplateBinding Content}"/>
If you want to modify the button control template, look at default template in following file (line 2147) for a starting point:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml

Button Click event won't fire in WP8

I have a layout like this.
<Grid Grid.Row="4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="gridTestAd" Height="80" Margin="-12,0,-12,0" >
<StackPanel Orientation="Vertical" Tap="StackPanel_Tap">
<StackPanel.Background>
<ImageBrush ImageSource="/Assets/image.jpg" />
</StackPanel.Background>
</StackPanel>
<adduplex:AdControl x:Name="adDuplexAd" AppId="123456"/>
<Button Name="btnRemoveAd" Content="X" Height="40" Width="40" HorizontalAlignment="Right" VerticalAlignment="Top" Background="Red" BorderBrush="Red" Foreground="White" Template="{StaticResource RemoveAdsButtonStyle}" Margin="0,-20,6,0" Click="btnRemoveAd_Click" />
</Grid>
I have set a breakpointin the btnRemoveAd_Click event but when i tap the button, the click event will not fire. Originally i created a custom button using images but that did not work either. This button is slightly edited using Blend because its so small and content is not showing. But only changes to Margin of the original button. I have search for the reasons but did not find any and i cant figure it either. What may be the problem? Please help
Control Template for the button
<ControlTemplate x:Key="RemoveAdsButtonStyle" TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" GeneratedDuration="0:0:0.25" To="Pressed">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseIn"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle1" StrokeThickness="0">
<Rectangle.Fill>
<ImageBrush Stretch="Fill" ImageSource="/Assets/img/close_small.png"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="rectangle" StrokeThickness="0" Opacity="0">
<Rectangle.Fill>
<ImageBrush Stretch="Fill" ImageSource="/Assets/img/close_small_presses.png"/>
</Rectangle.Fill>
</Rectangle>
</Grid>
</ControlTemplate>

How to animate appearing of an element

I have an question about Expression Blend 4.
I want to create a simple component appearing animation, when height of component changes from 0 to 100% and components below it are moving down to allocate required space.
My problem is that only static values in pixels allowed to create such type of animation. But I did not know height of my control (actually, it is textBox in which content and content length may vary), and I cannot set Height value of last keyframe to Auto.
What should I do to implement this task?
Thanks in advance.
I guess the easist way would be using the Fluid Layout.
In the below example I created a TextBlock and set its Visibility to Collpased. Then when the Show visual state is triggered, I set its Visibility to Visible. Normally you can't animate the Visibility but if you enable the Fluid Layout behavior (also remember to define a TransitionEffect), it will animate it for you automatically.
<UserControl
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:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" mc:Ignorable="d"
x:Class="transformanimation.MainPage"
Width="640" Height="480">
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0:0:0.7" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.7" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2">
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:FadeTransitionEffect/>
</ei:ExtendedVisualStateManager.TransitionEffect>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Hide"/>
<VisualState x:Name="Show">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<Grid Margin="205,96,275,150">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="TextBlock" FontSize="26.667" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<Rectangle Fill="#FF767689" Stroke="Black" Grid.Row="1"/>
</Grid>
<Button Content="hide" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="63,19,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="Hide"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="show" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="183,20,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="Show"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</UserControl>
Of course if you don't want to use this magicial animation you can try animating its ScaleY. Something like this,
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
Hope this helps! :)

Stretch ComboBox Content in Silverlight

This is driving me nuts. I can't seem to get the data template within my ComboBox to stretch the width of the pulldown. What gives?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ComboBox x:Name="SearchesComboBox" HorizontalContentAlignment="Stretch" Width="150">
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ComboBox.ItemContainerStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding}" Margin="2" />
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
<sys:String>Two</sys:String>
<sys:String>Four</sys:String>
<sys:String>Six</sys:String>
</ComboBox>
</Grid>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ComboBox.ItemContainerStyle>
I just confirmed the following works in WPF, moving the HorizontalContentAlignment up to the ComboBox:
<ComboBox x:Name="SearchesComboBox" HorizontalContentAlignment="Stretch" Width="150">
<ComboBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding}" Margin="2" />
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
<sys:String>Two</sys:String>
<sys:String>Four</sys:String>
<sys:String>Six</sys:String>
</ComboBox>
Let me know if this also fixes the problem in Silverlight. The issue as I was seeing it was the items in the drop-down were correctly sized, while the content that showed in the pull-down was not stretching.
Ok, after about a day of fiddling with it, I have a solution. I HATE it, but it works. Basically, I reflected into the System.Windows.dll for Silverlight, and I ripped out the default template for ListBoxItem (which ComboBoxItem uses).
It turns out that in that template, there is a ContentPresenter with the HorizontalAlignment hard-coded to Left. So, I ripped off the template, and added a TemplateBinding for HorizontalAlignment, so it can use whatever the HorizontalAlignment of ComboBoxItem is.
That being said, what follows is the working code. If ANYONE has a better way to do this, please tell me. I haven't checked yet if this is fixed in 3.0. I hope it is. It should really bind all the way from ComboBox.HorizontalContentAlignment.
<UserControl.Resources>
<Style x:Key="FixedComboBoxItem" TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
<Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ComboBox x:Name="SearchesComboBox" Width="150" ItemContainerStyle="{StaticResource FixedComboBoxItem}" HorizontalContentAlignment="Stretch">
<ComboBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" >
<TextBlock Text="{Binding}" Margin="2" />
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
<sys:String>Two</sys:String>
<sys:String>Four</sys:String>
<sys:String>Six</sys:String>
</ComboBox>
</Grid>