We Keep Coding

Extended Textbox is behind other elements in WPF

It's the first time i am learning WPF with C#.
So i have a textbox which is extended when i click on a button. The problem is when i extend it,it remains behind my other elements(textboxes etc...)
Here is the xml code for the textbox.
<StackPanel Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="3" Grid.RowSpan="5" Panel.ZIndex="0" Visibility="Collapsed" Name="descriptionPanel" Margin="2,0,0,0" Background="White">
<Border BorderBrush="DarkGray" BorderThickness="1" CornerRadius="5">
<StackPanel Orientation="Horizontal">
<TextBox Name="descriptionTextBoxExtended"
Margin="10,10,10,10"
Style="{StaticResource expandedTextBox}"
Text="{Binding Path=Description, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true, TargetNullValue=''}"
IsReadOnly="{Binding RelativeSource={RelativeSource AncestorLevel=1,AncestorType=Control}, Path=SecurityLevel2ReadOnly, Mode=OneWay}"
/>
<Button Name="descriptionHide" Style="{StaticResource MinusButton}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,10,10" Click="descriptionHide_Click" />
</StackPanel>
</Border>
</StackPanel>
And here is the C#
private void exDescription_Click(object sender, RoutedEventArgs e)
{
descriptionPanel.Visibility = Visibility.Visible;
}
This is how it looks when i run it before i click the extend button:
And this is how it looks when i extend the textbox:
I want all the highlighted components to be behind the textbox.

You should give us the code of the other elements beside "descriptionPanel", but as mm8 pointed out, it seems that your elements are not in the same Panel.

Problems with flyout over itemscontrol in Windows Phone 8.1

I've got the following piece of XAML code:
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding History}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Tapped="HistoryItemTapped">
<FlyoutBase.AttachedFlyout>
<Flyout>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}" />
</ScrollViewer>
<ScrollViewer>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}" />
</ScrollViewer>
</StackPanel>
</Flyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}"
TextTrimming="CharacterEllipsis"/>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
There are two problems I can't solve:
The flyout is shown upon tapping on one of items:
private void HistoryItemTapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase.GetAttachedFlyout((FrameworkElement)sender).ShowAt((FrameworkElement)sender);
}
However, no matter how I set up the flyout it always shows on the top of the screen, not over the tapped item. Why?
The flyout contains two TextBlocks on separate ScrollViewers. The text on one of them exceeds width of the flyout, bt the scrollviewer does not appear to be working (I cannot scroll horizontally the textblock). Why is that?

So let's knock these out real quick. Your #1 would be expected result, it's just going off the default FlyoutPlacementMode enumeration wherein generally your flyout is just meant to appear over the top in one of 5 spots, Top, Bottom, Left, Right, or Full(Center)
How to fix it, ditch the flyout control and just animate your own panel to do the same thing on a tap event or whatever, not hard at all.
Your #2, if I remember right the default on ScrollViewerfor something like the HorizontalScrollBarVisibility is False by default. So just add HorizontalScrollBarVisibility="Auto" to it.
Hope this helps, cheers

Trying to pin image on map with onclick event to page, based on binding.

I build this code so that i have multiple pins on the map. locations and text based on binding:
<Grid x:Name="LayoutRoot" Background="Transparent">
<maps:Map x:Name="myMap" Loaded="myMap_Loaded">
<toolkit:MapExtensions.Children>
<toolkit:MapItemsControl Name="Items">
<toolkit:MapItemsControl.ItemTemplate>
<DataTemplate>
<toolkit:Pushpin GeoCoordinate="{Binding Coordinate}" Tap="Pushpin_Tap_1" >
<toolkit:Pushpin.Template >
<ControlTemplate >
<Canvas>
<Image Source="/App;component/Assets/pin.png"
Width="48" Height="102"
Canvas.Left="-20" Canvas.Top="-102" />
<Border Background="Black" Width="200" Visibility="Visible" x:Name="border1" HorizontalAlignment="Center" >
<StackPanel x:Name="_Stack1" >
<TextBlock x:Name="TextBlock1"
Text="{Binding ID}"
Canvas.Top="-45"
Canvas.Left="5"
Style="{StaticResource PhoneTextNormalStyle }"
Foreground="#FF51FF00" />
<TextBlock
Text="{Binding Name}"
Canvas.Top="-25"
Canvas.Left="5"
Style="{StaticResource PhoneTextContrastStyle }"
Foreground="Red" />
</StackPanel>
</Border>
</Canvas>
</ControlTemplate>
</toolkit:Pushpin.Template>
</toolkit:Pushpin>
</DataTemplate>
</toolkit:MapItemsControl.ItemTemplate>
</toolkit:MapItemsControl>
</toolkit:MapExtensions.Children>
</maps:Map>
</Grid>
Now my question is how i can make a Tab event for the pushpin based on the TextBlock1.Text (I can`t "reach" the textblock1.text in the .cs part)
private void Pushpin_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
{
NavigationService.Navigate(new Uri("/ExtraPage/Info.xaml?selectedItem=" + TextBlock1.Text(THIS WONT WORK) , UriKind.Relative));
}
What is the best way to do this? Or am I doing it all wrong?
Thanks in advance

You can't access it because it's in the template.
If you want the tap event on TextBlock, just add it there instead of adding it to the pushpin. But I assume that's not really what your need.
If you want the Text value from TextBlock1, what you really want is the ID which is bound to that TextBlock. The sender for that event handler that you have is (probably) a Pushpin. So, what you really want is the DataContext of that Pushpin and the ID property of that DataContext, and from what I can tell, the DataContext is some sort of a location object, so I'll call it Location.
var id = ((sender as Pushpin).DataContext as Location).ID;
And that's what's in your TextBlock - id which you can easily use.
Change 'Location' to whatever your class is.

Popup does not closed event Stayopen set as False

I have use the following code snippet to define the Popup.
Code snippet[XAML]:
<Grid Margin="0,0,0,0" Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="19" />
<ColumnDefinition Width="19" />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Stretch"
Text="HeaderText"
FontWeight="Bold"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"/>
<Grid Grid.Column="1">
<Button Width="19" x:Name="FilterButton" Click="FilterButton_OnClick" Content="^"/>
<Popup x:Name="FilterPanel" StaysOpen="False" >
<Border >
<Grid>
<TextBlock x:Name="tblTitle" Text="PopUp Header" Background="Red" Grid.Column="0" Grid.Row="0"/>
</Grid>
</Border>
</Popup>
</Grid>
<TextBox Text="Test" Grid.Column="2"/>
</Grid>
I have use the following code snippet to open the popup
Code snippet[C#]:
private void FilterButton_OnClick(object sender, RoutedEventArgs e)
{
this.FilterPanel.IsOpen = true;
}
Scenorio:
Open the popup using button click.
Press Tab.
Focus move to TextBox.
Actual Behavvior:
Popup does not close.
Expected Behavior:
Popup should be closed.
For your reference here I have attached the simple sample .Can you please any look into this and provide guidance to archive my requirement. Thanks in advance.

This is very strange. I took your code and pasted it in a new project window and popup closed every time. However I remember when I wanted to create my own custom control I had a similar issue. I know one of the things is to set StaysOpen to false. This I see you have already done. Another is try to setting the following when FilterPanel is initialized
FilterPanel.IsMouseCaptureWithinChanged +=FilterPanel_IsMouseCaptureWithinChanged;
void FilterPanel_IsMouseCaptureWithinChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if (!(bool)e.NewValue)
{ FilterPanel.IsOpen = false; }
}
As I said my code worked perfectly when I copied your code, so I couldn't test it, but the above should work.

Change Grid definition in snapped view

My Windows 8 c#/xaml app has 3 big Grids with the Content inside. Each one fills exactly out the screen. This System works very well for my purpose, until the user snapps my app.
So is it possible to completly change the Grid definitions, or pull all the textboxes,buttons and listviews in a other "snapped" Grid? Last one is just an idea.
private void pageRoot_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (ApplicationView.Value == ApplicationViewState.Snapped)
{
????
}
else
{
Grid1.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
Grid2.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
Grid3.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
}
}

This is a scenario where MVVM becomes incredibly handy. By creating two separate views, one each for snapped, filled, and full screen, you can swap between them relatively easy.
Your other option is to use the new FlipView control. There's a great example of this in the Contoso Cookbook sample app that can be found in the Windows 8 Dev Camp in a Box.
http://bit.ly/win8RCdevcamp
Here's the example code from the Contoso Hands-On Lab:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">
<!-- Vertical StackPanel for item-detail layout -->
<StackPanel Orientation="Vertical" Margin="20,0,20,0">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="20" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/>
<Image x:Name="image" Width="260" Margin="0,12,0,40" Stretch="Uniform" Source="{Binding Image}" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="20" FontWeight="Light" Text="Ingredients" Margin="0,0,0,16"/>
<TextBlock FontSize="16" FontWeight="Light" TextWrapping="Wrap" Text="{Binding Ingredients, Converter={StaticResource ListConverter}}" />
</StackPanel>
</StackPanel>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
As you can see, for each FlipView, a different display state is referenced. I'd recommend checking out that hands-on lab for a more specific look at your situation, or this other sample that includes both HTML and XAML examples of the FlipView control:
http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4

In your scenario I would navigate to a different page when I detected the change to snapped and load a page that has a snap optimized experience rather than trying to dynamically update the layout of a complex page.