It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I want to block the app and show a black or a black transparent layer with a ProgressRing showing that the app is loading data.
Thanks
XAML
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<!-- Data will be loaded in GridView -->
<GridView />
<!-- Black layer with progress ring -->
<Border x:Name="border" BorderBrush="Black" BorderThickness="1" Opacity="0.95" Background="Black" Visibility="Collapsed">
<ProgressRing HorizontalAlignment="Center" VerticalAlignment="Center" IsActive="True" Width="100" Height="100" />
</Border>
<!-- Visual state will switch black layer and GridView -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Normal" />
<VisualState x:Name="Dark">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
C#
protected override void OnNavigatedTo(NavigationEventArgs e)
{
VisualStateManager.GoToState(this, "Dark", true);
//TODO: Load Data
VisualStateManager.GoToState(this, "Normal", true);
}
Related
I have been struggling with this for a few days now unable to find solution after lot of effort. This is the code where I'm facing the issue. SO I have a ItemsControl where each element is Button and each Button has an Image and TextBlock. On hovering over Button I could see the Background of Button being changed to Red as expected. But I'm unable to change the Foreground of TextBlock to Green. Any help in this regard is highly appreciated
<ControlTemplate x:Key="ButtonTemplate" TargetType="ContentControl">
<Grid Background="Transparent" x:Name="Mini">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Mini.Background" Value="Red" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="MiniContent" />
</Grid>
</ControlTemplate>
<DataTemplate x:Key="ListItemTemplate" x:DataType="local:DataModel">
<Button
Template="{StaticResource ButtonTemplate}">
<Button.ContentTemplate>
<DataTemplate x:DataType="local:DataModel">
<UserControl>
<Grid >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Value.Foreground" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="Value"
Foreground="Yellow"
Text="{x:Bind DisplayName, Mode=OneWay}"/>
<Image
Width="16"
Source="{x:Bind ImageBitmap, Mode=OneWay}"/>
</Grid>
</UserControl>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</DataTemplate>
<ItemsControl
ItemTemplate="{StaticResource ListItemTemplate}"
ItemsSource="{x:Bind DataModelVector, Mode=OneWay}" />
You need something to actually transition between the VisualStates, the PointerOver state isn't triggered automatically. The easiest way would be to factor the content of your DataTemplate into its own file (UserControl with markup and code-behind) and handle pointer events in code to transition between visual states using VisualStateManager.GoToState.
You could also create a reusable "StateTrigger" for transitioning any control into a "PointerOver" visual state, but often some code-behind is simpler.
I have a question that is me to leave upset. I want to drag and drop an item in a listview and I can not do when I have a style applied to my item. Only I can do and is working perfectly when I have no style (MyButtonStyle) applied / or do not have this image in style. When I have style (MyButtonStyle), ItemDragStarting event is not called.
Another situation: I have tapped associated event, and when I apply this style crashes. I do not understand what the problem is, can someone help me?
Thank you:
Code MainPage:
<ListView x:Name="MyListView" ItemsSource="{x:Bind _ObservableCollection}" Style="{StaticResource MyListViewStyle}" SelectionMode="None" CanDragItems="True" DragItemsStarting="MyListView_OnDragItemsStarting">
<ListView.ItemTemplate>
<DataTemplate>
<Button Tapped="Item_Tapped" Style="{StaticResource MyButtonStyle}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
XAML Style code:
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Background" Value="{StaticResource MyColor1}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="ButtonContent" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="ButtonContent" To="{StaticResource MyColor2}"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Duration="00:00:00.1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation TargetName="ButtonContent"/>
<ColorAnimation Storyboard.TargetName="ButtonContent" To="{StaticResource MyColor3}"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Duration="00:00:00.1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Width="200" Height="200">
<Image.Source>
<BitmapImage UriSource="{Binding MyImage, Mode=OneTime}" />
</Image.Source>
</Image>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The best solution for you would be to not use a Button at all. Use IsItemClickEnabled property and ItemClick event on the ListView instead, then put your image in the ItemContainerStyle. It will fix your drag and drop issues, focus problems and result in better performance.
I have several buttons layed out horizontally on my page, and as a user selects one I would like the background to become a certain color and remain that way until another button is pressed. I have a Style that I created to highlight the background of the button, but I'm not sure how to keep the background highlighted until another button is pressed. I have applid the ButtonStyle2 to all of the buttons.
MainPage.xaml
<Style x:Key="ButtonStyle2" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<ListBoxItem toolkit:TiltEffect.IsTiltEnabled="True" Width="72">
<Button x:Name="Button1" Tap="Button1_Tap" Style="{StaticResource ButtonStyle2}">
<Button.Content>
<Image Source="/Assets/Icons/appbar.settings.png"/>
</Button.Content>
</Button>
</ListBoxItem>
...
<ListBoxItem toolkit:TiltEffect.IsTiltEnabled="True" Width="72">
<Button x:Name="Button3" Tap="Button3_Tap" Style="{StaticResource ButtonStyle2}">
<Button.Content>
<Image Source="/Assets/Icons/appbar.view.png"/>
</Button.Content>
</Button>
</ListBoxItem>
You are taking the correct approach by changing the style, but consider another control instead of the button.
Proposed behavior
What you are describing appears to be mutually exclusive set of buttons. You have a group of buttons, of which one is active. When it is active, the other buttons are deactivated. Sure you are running code when the active button, but it seems to me you really want a way to create a set of mutually exclusive buttons.
You can try and make the button control work this way but there are already controls in Windows Phone that do this. RadioButton is one you should consider.
Drawback
Of course, RadioButtons don't look like conventional buttons so you might not have considered using them. .
But in XAML, you can style RadioButton to look like normal buttons, or put images on the RadioButton content or whatever UI seems appropriate.
If you can live with the standard look you are done. Otherwise adapt your style to RadioButton , instead of Button and the phone keeps track of which RadioButton is pressed.
Matthias Shapiro shows how to update RadioButton templates to look like Windows 8 items.
You can place your style in the app.xaml resource file. And apply it by c# code on button tap event.
btn.Style = App.Current.Resources["StyleKey"] as Style;
Here btn is your button name in xaml.
Doing it with a single style isn't possible as you can not Fore a button to keep its state managed according to function of another button, Visual states of a button are limited and gets applied to a button atomically(pressed, disabled of a button cannot be toggled according to other buttons around).
Go for making two styles with different backgrounds and apply them accordingly on button clicks or
You can make a dummy with the help of stackpanels and textblocks
Somthing like this in xaml
<StackPanel Name="stkButton1" Tap="stkButton1_Tap" Height="50" Width="225" Background="Blue">
<TextBlock Text="Button 1" Margin="0,10,0,0" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Name="stkButton2" Tap="stkButton2_Tap" Height="50" Width="225" Background="Gray">
<TextBlock Text="Button 2" Margin="0,10,0,0" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
and in .cs
private void stkButton2_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
stkButton1.Background = new SolidColorBrush(Colors.Gray);
stkButton2.Background = new SolidColorBrush(Colors.Blue);
}
private void stkButton1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
stkButton2.Background = new SolidColorBrush(Colors.Gray);
stkButton1.Background = new SolidColorBrush(Colors.Blue);
}
I have a Slider component in my WP7 and WP8 app. In WP7, the Slider moves according to its Scheduler, but in WP8, it simply just won't move.
The Slider is styled, and I know there is some changes in WP8. First of all, what exactly are those changes and what do I change in code? The documentation from Microsoft is poor. Anyone got an idea of what this can be, maybe other than the changes from Microsoft?
And even if I set the default value to something, the thumb will always be in its starting position. I can't move it either.
For me, this applies to a various different styles, e.g. from Mifrosofts own Slider Styles and Templates.
This one has a template:
<Slider x:Name="Slider" IsHitTestVisible="true" Value="{Binding SliderValue, Mode=TwoWay}" Maximum="100" VerticalAlignment="Center" Margin="0,24,0,0" Template="{StaticResource SliderControlTemplate1}" />
Here is the template:
<ControlTemplate x:Key="SliderControlTemplate1" TargetType="Slider">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalTrack"/>
<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalTrack"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalFill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalFill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0"/>
<Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0" Opacity="0.2"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<Thumb x:Name="HorizontalCenterElement" Grid.Column="1" Height="12" Margin="0" Width="12">
<Thumb.Template>
<ControlTemplate>
<Grid ManipulationDelta="ProgressBarManipulationDelta" Width="46" Height="46" VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="/slider.png"/>
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
</ControlTemplate>
And I have tried a corresponding Style. What could be the problem? Should I use Style or Template? Both acts equally for me now..
Had the same issue. Before WP8, we had edited a copy of its original style and modified it to our purposes. Later, when upgrading the project to WP8 this modified style from WP7 caused the slider not getting updated anymore as the style has changed since. Removing the style fixed it. In case the modifications are still needed, you should get the original style from WP8's slider component.
let's say i have something like this:
<Grid>
<ListBox x:Name="list"
ItemsSource="{Binding SomeCollection, Mode=TwoWay}"
SelectedItem="{Binding SomeItem, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="first" Text="{Binding SomeProperty}" />
<TextBlock x:Name="second" Text="{Binding OtherProperty}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Now, how do i alter some style property (f.ex. FontSize) of only the TextBlock called "second" when a ListBoxItem gets selected? If i'd like to set the FontSize for all ListBoxItem's contents, then i'd have no problem. That scenario is quite well documented here and elsewhere on the web.
I will not give you an exact solution, but a good point to start with: check out the file
C:\Program Files\Microsoft SDKs\Windows Phone\vX.Y\Design\System.Windows.xaml
you have to adjust X.Y to 7.0/7.1 along with your setup. There you will find exactly the same Control-Templates that are being used all the basic UI Controls of the WP7/Silverlight. Open it in VisualStudio-or-whateverelse and search for:
<Style TargetType="ListBoxItem">
(... and immediatelly following ~40 lines of xaml)
ah well, since I've opened that file, here's that
<!--x:Key="PhoneListBoxItem"-->
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="{TemplateBinding Foreground}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is the complete style for your DEFAULT ListBoxItem - the thing you want to alter. Skim through the code and note the 'ContentPresenter' and preceding 'VisualStateGroup x:Name="SelectionStates"'.
ContentPresenter is the thing that will show your DataTemplate for the item.
VisualStates in that group define the changes from the normal state that should occur if a "selected state" is fired of on an list element.
Once the "selection state" diminishes, the element returns to the unselected state automatically and his visuals follow. Note also that the Unselected visual state does not enforce any changes - so it preserves your plain DataTemplate style.
The last thing to notice is that this is a style for ListBoxItem, and not for your data-item, nor your data-template. Your DataTemplate is never touched, it is directly displayed by the ContentPresenter. The ListBox wraps all your items in "ListBoxItem" instances, then displays those ListBoxItems and applies that style to them.
IMHO, this is the point you will have to work with.
You may want to copy&alter this style to your needs, and then set your ListBox.ItemContainerStyle to that new style. One of the ways is:
<YourPage.Resources>
<Style x:Key="mylistboxitemoverride" .....
........
</Style>
</YourPage.Resources>
...
...
<ListBox ......... ItemContainerStyle="{StaticResource mylistboxitemoverride}"
...
...
</ListBox>
Now, the trick is to modify the 'Selected' VisualState, and make it alter not the Foreground (doing that would restyle both your TextBoxes!), but some other property which will affect only one of your txbs. Unfortunatelly, that may be harder/uglier. I don't at that moment any idea how to make it "prettier" than hard-replacing the ContentPresenter with your DataTemplate and referencing your exact leaf-textbox in the VisualState like that:
<Style .... TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="SECOND" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" /> <!-- #### RETARGETTED -->
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SECOND" Storyboard.TargetProperty="Foreground"> <!-- #### RETARGETTED -->
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- #### INLINED YOUR DATATEMPLATE -->
<StackPanel Orientation="Vertical"
Margin="{TemplateBinding Padding}"
DataContext="{TemplateBinding Content}"> <!-- #### careful with the bindings. the DataCtx may be needed or is spurious. do check that! -->
<TextBlock Text="{Binding SomeProperty}" /> <!-- #### referenced from nowhere, so I removed the name -->
<TextBlock x:Name="SECOND" Text="{Binding OtherProperty}" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This should be almost what you want, or at least very close to it. I have not tested it, you may need to tinker with proper data-binding (I've included a DataContent=binding:Content, but that's a quick guess) and probably you will want to add your own animations. I think you have now tons of bits to experiment with. Have fun!
Set the Style on the TextBlock to a Style that does what you want.
<DataTemplate>
<TextBlock x:Name="first" Style="{StaticResource Header}" Text="{Binding SomeProperty}" />
<TextBlock x:Name="second" Style="{StaticResource Info}" Text="{Binding OtherProperty}" />
</DataTemplate>
one way to achieve this is, create an extended ListBox class with a SecondText dependency property in it. Then just use Blend to generate a normal ListBox style, change the targat type to my ExtendedListBox.
In this style, add another TextBlock control and set its Text TemplateBinding to the SecondText. You just need to alter this TextBlock's font size in the selected visual state.
Also, rather than extending the ListBox, you might be able to create an attached property SecondText and just TemplateBinding to it directly, but I haven't tested this method yet.
Hope this can get you started with. :)