We Keep Coding

Design ListPicker Blend/Xaml

I am using a ListPicker, but have a hard time getting the design to work. I have included the test I have done:
<ControlTemplate x:Key="listpicker_style" TargetType="toolkit:ListPicker">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PickerStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Highlighted">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="UserControl"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxForegroundBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBorderBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource TransparentBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneDisabledBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="UserControl"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneDisabledBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource PhoneSubtleBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0 0 0 8"/>
<Grid>
<Rectangle Fill="#FFEAC726" HorizontalAlignment="Left" Height="52" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,43,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
<UserControl x:Name="UserControl" Foreground="{TemplateBinding Foreground}" Margin="7,-3,-7,3">
<StackPanel>
<TextBlock x:Name="MultipleSelectionModeSummary" Margin="8 8 0 8" />
<Canvas x:Name="ItemsPresenterHost" MinHeight="46">
<ItemsPresenter x:Name="ItemsPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Canvas>
</StackPanel>
</UserControl>
</Border>
</Grid>
</StackPanel>
</ControlTemplate>
Basicly what I want to achieve is to create a listpicker that looks like a scroll. When you click it the scroll expands and shows the entire options. Therefore I am not interested in using the full-screen look.
I have also done other tries with similar bad success where I used designed usercontrols as the scrolls top and bottom for animations. But the design of the listpicker has been impossible to do.
My question is therefore if somebody has a design of the listpicker, using usercontrols, such that I can override them or if you can direct me towards how to manipulate the listpicker correctly. I have used blend, experssion design, Illustrator and XAML, so any method for designing the listpicker using either of them would be much appreciated!
Visual Example
So the idea is something like this:
Such that the text is inside the scroll, when you click it, the scroll expands with a list inside you can scroll to choose elements.
UserControl
Usercontrol of a scroll
Pictured Overview
The selected Item:
Click the element and a list appears:
This is how a listpicker works I want to design it as a scroll, either all from scratch or using the tool listpicker description, is what I am looking for. I have however not succeeded in making the expanding look nice.

I have made it the most simple I can. The idea is the following: the Translate and Scale properties are animated between states, others like Height, etc aren't. So Let's create the Layout like the following:
<StackPanel Width="500">
<Grid x:Name="HeaderGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped"/>
<Grid VerticalAlignment="Top" x:Name="ContentGrid" Height="400" Background="BlanchedAlmond" RenderTransformOrigin="0.5,0">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<ScrollViewer>
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Tapped="TextBlock_Tapped"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Items>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
</ItemsControl.Items>
</ItemsControl>
</ScrollViewer>
</Grid>
<Grid x:Name="BottomGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
</Grid>
</StackPanel>
Now let's add some visual states to the page, control or what you need
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded"/>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentGrid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BottomGrid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And finally the codebehind for the change of states
private void HeaderGrid_Tapped(object sender, TappedRoutedEventArgs e)
{
CheckState();
}
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
var value = (sender as FrameworkElement).DataContext;
CheckState();
}
private void CheckState()
{
if ((ContentGrid.RenderTransform as CompositeTransform).ScaleY > 0)
VisualStateManager.GoToState(this, "Collapsed", true);
else
VisualStateManager.GoToState(this, "Expanded", true);
}
Now you can add fade on the text when appears and disappears, and change the colors for images, etc. But the idea is solved.

How to do dynamic UI change in WPF [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like to ask how to implement the UI change based on the button click. At below screenshots shown 1,2,3 are the toggle buttons.
When user click button 1, then it will display Form B UI.
When user click button 2, it will display image.

Run this xaml code separately and try.
<Border Width="500" Height="400" BorderThickness="1" BorderBrush="Black">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="70"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.ColumnSpan="6" BorderBrush="Black" BorderThickness="0,0,0,1"></Border>
<TextBlock Name="FormA" Text="Form A" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Top"></TextBlock>
<Border Name="FormBBoder" Grid.Column="0" Grid.ColumnSpan="6" Grid.Row="1" Visibility="Collapsed" BorderBrush="Black" BorderThickness="0,0,0,1"></Border>
<TextBlock Name="FormB" Text="Form B" Grid.Column="1" Grid.Row="1" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<Border Name="FormCBoder" Grid.Column="0" Grid.Row="2" Visibility="Collapsed" BorderBrush="Black" BorderThickness="0,0,1,0"></Border>
<TextBlock Text="Form C" Name="FormC" Visibility="Collapsed" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<ToggleButton Content="1">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<Int32Animation Storyboard.TargetName="FormA" Storyboard.TargetProperty="(Grid.Column)" From="0" To="1" Duration="0:0:0" ></Int32Animation>
<Int32Animation Storyboard.TargetName="FormA" Storyboard.TargetProperty="(Grid.Row)" From="0" To="2" Duration="0:0:0" ></Int32Animation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormCBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormC" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<ToggleButton Content="2" Grid.Column="1">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<ToggleButton Content="3" Grid.Column="2">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormCBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormC" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
</Border>
Result

Create a form with all the elements. Set visibility on the image and form b to collapsed. On button 1 create an event that changes form b visibility to visible. On button 2 create an event that changes image visibility to visible.
A simple example:
Code in xaml
<Window x:Class="WpfApplication1.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">
<StackPanel>
<TextBlock Text="1st element" HorizontalAlignment="Center"></TextBlock>
<TextBlock x:Name="hiddenElement" Visibility="Collapsed" Text="hiddenElement" HorizontalAlignment="Center"></TextBlock>
<Button x:Name="btn" Content="Show 2nd element" Click="btn_Click"/>
</StackPanel>
</Window>
Code behind
private void btn_Click(object sender, RoutedEventArgs e)
{
hiddenElement.Visibility = Visibility.Visible;
}
This should give you a basic idea of what to do.

Use a TabControl
<TabControl>
<TabItem Header="1">
<!-- your content (Form A) here -->
</TabItem>
<TabItem Header="2">
<!-- your content (Form A,B) here -->
</TabItem>
<TabItem Header="1">
<!-- your content (Form A,B and image) here -->
</TabItem>
</TabControl>

Using the WPF TabControl
The WPF TabControl allows you to split your interface up into different areas, each accessible by clicking on the tab header, usually positioned at the top of the control.
WPF TabControl

Using PointerOver style on Button requires double-tapping from a touch device (mouse clicking is fine)

I'm writing Windows Store app using C#/VS2013
When I modify a button image style to create an effect when the mouse pointer is over the button, I use the following:
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Image Source="/button_enabled.png" x:Name="Image" Height="50" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="/button_enabled.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="/button_over.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="/button_click.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This works perfectly fine when I'm using a mouse to navigate the cursor.
However, when I use the touch screen to tap the button (instead of using a mouse to click the button), it ALWAYS requires 2 separate clicks to register an action.
If I remove the PointerOver section, then everything works fine (both mouse clicking and touching/tapping), but I lose the mouse-over effect when using a mouse.
Anyone has ideas on why this is happening? Is this a bug in the PointerOver attribute?
Update
This is how the buttons are instantiated:
<Grid Grid.Column="1">
<Button Style="{StaticResource ButtonStyle}" Tag="Style1" HorizontalAlignment="Right" Margin="10,0,10,0" Click="Btn_Click" PointerReleased="Btn_Released" IsEnabled="True"/>
</Grid>

A different view for Snapped state (Metro app)

I have a simple app I'm making and I am having a little trouble with the different states (Full, Snapped, etc).
Below, is how my app looks in landscape, full screen view. As you can see, it has 2 grids. One left aligned, and 1 right aligned:
Now, when the user snaps my app to the left or right, I want only the second grid (on the right: Grid TWO) to be visible in snapped mode, like this:
How can we achieve this?
I have tried several things but my current code doesn't work either. I know it's wrong but here it is anyway:
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<Grid Grid.Row="1" Margin="120, 30, 0, 0" HorizontalAlignment="Stretch">
<ListBox x:Name="theList" HorizontalAlignment="Left" Width="240" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem Content="{Binding Name, Mode=TwoWay}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox x:Name="theNote" Text="{Binding ElementName=theList, Path=SelectedItem.Content, Mode=TwoWay}" AcceptsReturn="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="245,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- The back button and title have different styles when snapped -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

you need the following:
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
You'll see that we're setting Grid1 to be hidden and Grid2 to be of a specific width. This will happen when the page is moved to "Snapped" state.

try to add this in the visualstate = 'snapped'
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridOne" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

The second grid in your code snippet has a left margin of 120 pixels. The text inside it has a left margin of 245 pixels, to place it to the right of the list. Margins on nested objects will be additive, so the effective left margin for the text is 365 pixels (not even considering what else it's nested in). Unless you are also changing these margin values when the page is placed in snapped view, the text will be too far to the right to see. (Recall that snapped view is only 320 pixels wide!)
Here is a very simplified example of two grids on the page. Note that Grid2 has a large left margin to place it on the right of Grid1. The textboxes inside the grids have NO left margin.
<Grid x:Name="Grid1" Grid.Row="1" Margin="120,30,0,0" Width="240" HorizontalAlignment="Left">
<TextBox x:Name="theFirstNote" Text="This is grid 1." AcceptsReturn="True" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>
<Grid x:Name="Grid2" Grid.Row="1" Grid.Column="1" Margin="370,30,0,0" HorizontalAlignment="Stretch">
<TextBox x:Name="theSecondNote" Text="This is grid 2." AcceptsReturn="True" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>
When the VisualState changes to Snapped, not only do we have to change the visibility of Grid1, but we also have to change the margin of Grid2 so it's actually visible:
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid2" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="10,10,10,10"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

Textbox only clickable on "first row"

I have a textbox and which is higher then a "normal" textbox. I am only able to enter text if I click on the "first row" of the textbox. How can I make it possible to click on any part of the textbox and be able to get the cursor shown because this is pretty anoying if you have a 5 line textbox and have to click on the first line to enter some text
<StackPanel Orientation="Vertical" Margin="0,0,15,0">
<TextBlock x:Name="lblObjective" Text="Objective" Style="{StaticResource TextBlockStyle}" VerticalAlignment="Center"></TextBlock>
<TextBox x:Name="Objective" Text="{Binding ObjectiveText, Mode=TwoWay}" TextWrapping="Wrap" Height="120" Width="500"></TextBox>
</StackPanel>
Edit:
This is the template that affects all textboxes in my application. Can anyone say what I need to add to be able to click anywhere on the textbox and still get the caret instead of having to click on the first line
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusRectangle" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ReadOnlyVisualElement">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusRectangle" />
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusInnerRectangle"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard/>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="Base" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Opacity="1" Fill="{StaticResource ControlBackgroundBrush}" />
<Rectangle x:Name="FocusRectangle" StrokeThickness="{TemplateBinding BorderThickness}" Opacity="0" Stroke="{StaticResource TextBoxMouseOverBorderBrush}" />
<Rectangle x:Name="FocusInnerRectangle" StrokeThickness="{TemplateBinding BorderThickness}" Opacity="0" Margin="1" Stroke="{StaticResource TextBoxMouseOverInnerBorderBrush}" />
<Grid Margin="0,1,0,0">
<Border x:Name="ReadOnlyVisualElement" Background="{StaticResource ReadOnlyBrush}" Opacity="0"/>
<Grid >
<ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Margin="4,0,2,2" VerticalAlignment="Top" Background="{x:Null}"/>
</Grid>
</Grid>
<Rectangle x:Name="DisabledVisualElement" Stroke="{StaticResource ControlsDisabledBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Fill="{StaticResource ControlsDisabledBrush}" IsHitTestVisible="False" Opacity="0"/>
<Border x:Name="ValidationErrorElement" BorderBrush="{StaticResource ControlsValidationBrush}" BorderThickness="1" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>true</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="12" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12">
<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="{StaticResource ValidationBrush5}" Margin="1,3,0,0"/>
<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="{StaticResource WhiteColorBrush}" Margin="1,3,0,0"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
If I remove the whole template everything works fine (i.e. wherever I click on the textbox I get a carret) but then the rest is also lost. So I am missing something any ideas?
Edit 2:
<ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Margin="4,0,2,2" VerticalAlignment="Top" Background="{x:Null}"/>
was the root of the problem... Instead of having VerticalAlignment="Stretch" it was set to top and therefor only one line was clickable...

I'm not sure what you are seeing but I find that in such a textbox clicking anywhere in the textbox gives it the input focus so I can start editing (regardless BTW of the state of AcceptsReturn although you should have that turned on).
However if the place you click in the box is beyond the end of the current string value the caret is placed at the end of the content not at the place you clicked. This is common text box behaviour, the text box in stackoverflow where I'm typing this has the same behaviour.
If you want to be able to start typing anywhere in the TexBox then you will need to detect the text position of the mousedown and inject the appropriate amount of whitespace. Not a trivial matter.