how we use window user phone controll in my app - windows-phone-7

i want to add a user control like stack panel in my Grid for example
- a grid which name content panel which is in MainPage.xaml
- List item
-stack panel which is in usercontrol.xaml
<UserControl x:Class="USER.WindowsPhoneControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
<StackPanel HorizontalAlignment="Center">
<StackPanel.Resources>
<!--Create a Style for a TextBlock.-->
<Style TargetType="TextBlock" x:Key="TextBlockStyle">
<Setter Property="Foreground" Value="Navy"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
</Style>
<!--Create a Style for a TextBlock.-->
<Style TargetType="TextBox" x:Key="TextBoxStyle">
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Margin" Value="4"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Background" Value="Blue"/>
</Style>
</StackPanel.Resources>
<TextBlock FontSize="18" Text="Enter your name." Name="abc" />
<StackPanel Orientation="Horizontal" Name="sta">
<TextBlock Style="{StaticResource TextBlockStyle}">
First Name:
</TextBlock>
<TextBox Name="firstName" Style="{StaticResource TextBoxStyle}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource TextBlockStyle}">
Last Name:
</TextBlock>
<TextBox Name="lastName" Style="{StaticResource TextBoxStyle}"
Margin="6,4,4,4"/>
</StackPanel>
<Button Width="50" Content="Submit" Click="Button_Click"/>
</StackPanel>
</UserControl>
i want to add stack panel in grid .....
thanx in advance

I'm not 100% certain what you're actually asking in your question but it's perfectly possible to put a StackPanel in a Grid:
<Grid>
<StackPanel />
</Grid>

Related

No XAML designer preview with custom ChromeWindow

I've been trying to build a custom chrome window vs a window with no border style.
In Visual Studio, the XAML designer is showing the custom title bar in the content area, and the actual content area controls aren't visible. When I compile and run it, everything looks correct.
One other side problem was I can't seem to get the Command binding on the titlebar buttons correct. I tried binding them to the appropriate SystemCommands but I'm not sure what I'm doing wrong there either. So instead I just added click event handlers and do the code there. Was just trying for a XAML only solution for that. The Click event handlers work correctly.
Below is my XAML. At the end of the XAML is a basic Grid with a TextBlock that says "I should be visible!" but it isn't in the designer.
Also attached (if I have the permissions to do so) is a screenshot of what the designer looks like in my Visual Studio. As you can see the controls I placed in the custom title bar are clearly visible. You'll also see in the screenshot that the default windows title bar is also visible.
Can anyone point me in the right direction as to why my designer isn't WYSIWYG?
<Window x:Class="Window1"
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:local="clr-namespace:ChromeWindowTest"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="Window1"
Title="Window1"
Width="800"
Height="450"
Background="#252525"
Foreground="White"
mc:Ignorable="d">
<WindowChrome.WindowChrome>
<WindowChrome CornerRadius="0"
GlassFrameThickness="0,0,0,1"
NonClientFrameEdges="None"
ResizeBorderThickness="5"
UseAeroCaptionButtons="True" />
</WindowChrome.WindowChrome>
<Window.Resources>
<local:WindowStateToMarginConverter x:Key="WindowStateToMarginConverter" />
<local:WindowStateToVisibilityConverter x:Key="WindowStateToVisibilityConverter" />
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="White" />
<Setter Property="FontFamily"
Value="Lucida Sans Unicode" />
<Setter Property="FontSize"
Value="12 pt" />
<Setter Property="Margin"
Value="3,0" />
</Style>
<Style x:Key="CaptionButtonStyle"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot"
Width="44"
Height="30"
Background="Transparent"
WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock x:Name="txt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
Foreground="White"
RenderOptions.ClearTypeHint="Auto"
Text="{TemplateBinding Content}"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="Aliased" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="LayoutRoot"
Property="Background"
Value="#F79721" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MinimizeButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
</Style>
<Style x:Key="MaximizeButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Visibility"
Value="{Binding WindowState,
Converter={StaticResource WindowStateToVisibilityConverter},
ConverterParameter=0}" />
</Style>
<Style x:Key="RestoreButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Visibility"
Value="{Binding WindowState,
Converter={StaticResource WindowStateToVisibilityConverter},
ConverterParameter=2}" />
</Style>
<Style x:Key="CloseButtonStyle"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot"
Width="44"
Height="30"
Background="Transparent"
WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock x:Name="txt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
Foreground="White"
RenderOptions.ClearTypeHint="Auto"
Text="{TemplateBinding Content}"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="Aliased" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="LayoutRoot"
Property="Background"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.Template>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Background}">
<StackPanel Height="32"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=WindowState,
Converter={StaticResource WindowStateToMarginConverter}}"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="Icon_Click"
WindowChrome.IsHitTestVisibleInChrome="True">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<ContentPresenter />
</Grid>
</ControlTemplate>
</Button.Template>
<Image Width="32"
Height="32"
Source="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Icon}"
WindowChrome.IsHitTestVisibleInChrome="True" />
</Button>
<StackPanel Orientation="Vertical">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="10 pt"
LineHeight="16"
LineStackingStrategy="BlockLineHeight"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Title}" />
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="10 pt"
LineHeight="16"
LineStackingStrategy="BlockLineHeight"
Text="{Binding Path=SubTitle}" />
</StackPanel>
</StackPanel>
<Button x:Name="btn"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Click="btn_Click"
Content="Placeholder"
WindowChrome.IsHitTestVisibleInChrome="True" />
<StackPanel HorizontalAlignment="Right"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button x:Name="MinimizeButton"
Click="MinimizeButton_Click"
Style="{DynamicResource MinimizeButtonStyle}" />
<Button x:Name="MaximizeButton"
Click="MaximizeButton_Click"
Style="{DynamicResource MaximizeButtonStyle}" />
<Button x:Name="RestoreButton"
Click="MaximizeButton_Click"
Style="{DynamicResource RestoreButtonStyle}" />
<Button x:Name="CloseButton"
Click="CloseButton_Click"
Style="{DynamicResource CloseButtonStyle}" />
</StackPanel>
<ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=Window},
Path=Content}" />
</Grid>
</ControlTemplate>
</Window.Template>
<Grid Margin="0,35,0,0">
<TextBlock Text="I should be visible!" />
</Grid>
I figured it out by accident.
In case anyone else happens across this post with a similar problem.
The following bit of code was wrong:
<ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=Window},
Path=Content}" />
The correct code is either just an empty ContentPresenter or the MSDN example for ChromeWindow of:
<ContentPresenter Content="{TemplateBinding Content}" />
No binding seemed to work fine as well.
Also, my original code above, I should probably have the content presenter as the first item in the Grid so that content doesn't obscure the title bar. I had there originally, but I moved it to the last entry to see if the reason I was seeing only the title bar was because of z-order.

Xamarin.Forms - Label not centered

I've got a StackView which contains 2 Labels. One is normal text, and the other one is a FontAwesome Icon.
Anyhow both Labels are not centered vertically inside the StackView. Here is the Code for them:
The Styles:
<Style x:Key="FAIconedLabel" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="FontSize" Value="40" />
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="EmailLabel" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="FontSize" Value="20" />
</Style>
And the Views itself
<!-- Top Right -->
<Grid BackgroundColor="{StaticResource LamaControlGray}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,Factor=1,Constant=-400}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=0,Constant=400}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=0,Constant=40}" >
<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="FillAndExpand" BackgroundColor="Red">
<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="FillAndExpand" Style="{StaticResource EmailLabel}"/>
<fal:FontAwesomeLabel Text="{Binding SettingsIcon}" BackgroundColor="Green" VerticalOptions="CenterAndExpand" Style="{StaticResource FAIconedLabel}" />
</StackLayout>
</Grid>
Do I miss something here?
Edit 1
I added a BackgroundColor to see, if the Label actually fills the StackView
Edit 2
After cleaning and rebuilding the solution, the email Label is centered now. But the Iconed one still remains at the bottom
Yes you are missing something.
You're not setting it to be centered vertically.
Either
<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Style="{StaticResource EmailLabel}"/>
or
<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="CenterAndExpand" Style="{StaticResource EmailLabel}"/>

Default Border is showing while using Gridview in windows phone uwp

I am displaying list of items with it's headers and content using gridview as shown below.
<Grid>
<GridView ItemsSource="{Binding Source={StaticResource src}}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Background="#2a2621" Width="400" Height="35" Margin="-10,0,-10,0">
<TextBlock x:Name="atistType" Width="200"
Text="{Binding RegionalName}"
Foreground="White"
FontWeight="ExtraBold" FontSize="22" Margin="10,0,0,0"/>
<Image Margin="110,0,10,0"
Tag="{Binding RegionalName}"
Tapped="RedirectToImageListing"
Source="Assets\Right-arrow.png"
Height="25"></Image>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5" Tag="{Binding AlbumId}"
Tapped="RedirectToImageListOrGridView" >
<Grid>
<Image Width="{Binding ListingWidth}" Source="Assets/PlaceHolder.jpg"></Image>
<Border BorderThickness="1" BorderBrush="White">
<Image Width="{Binding ListingWidth}"
Source="{Binding SmallImage}"></Image>
</Border>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
I am able to show the data perfectly.
But, my concern is from somewhere a line is displaying like border.
You can check in the screenshot.
As shown in the screenshot, for the first image only a line is displaying like a border.
Is there a way to remove that.
I am not able to find from where the border is coming.
Thank you.
Try this
<GridView>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0,0,4,4" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ItemContainerStyle>
Taken from here

Focus changed on LoadMore Button click in Windows Phone Application Page

In my Windows Phone application I have a ListBox with Load More button, in one of my pages. At the bottom of the page a TextBox and a button is present. when I click on the Load More button at the bottom of listbox, the focus automatically goes to the textbox and the keypad is shown. I don't need to go the focus to the textbox on buttonclick. How this problem occures and how can I overcome this problem.
The xaml of style used for the listbox shown below
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ListBoxMore" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer">
<StackPanel>
<ItemsPresenter/>
<Border BorderBrush="Black" BorderThickness="0,0.5">
<Button Content="Load More..." Name="btnLoadMore" Visibility="Visible" Background="White" Foreground="#FF176DDC" Click="btnLoadMore_Click"></Button>
</Border>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
The xaml of the listbox shown below
<ListBox x:Name="userDetailsList" SelectionMode="Multiple" Style="{StaticResource ListBoxMore}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border BorderThickness="0,0.5,0,0" BorderBrush="Black" Width="440">
<Grid Width="430">
<Image Source="{Binding UserImage}"/>
<TextBlock Text="{Binding UserName}"/>
<TextBlock Text="{Binding Details}"/>
<TextBlock Text="{Binding Date}"/>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
When I click on loadmore button the focus goes to the textbox that placed below the listbox. There is only one textbox is there.

How to Default Scroll Position in ScrollViewer/ListBox in WP7

I'm building a WP7 application using the Panorama control. I'm fairly new to WP7 so I might be missing something simple. My Panorama control is bound to ViewModel and PanoramaItems are added at runtime when a property of that ViewModel is populated with data via web service request. I'd like to have a section at the top of each PanoramaItem that holds a refresh button etc.
I'm able to add an item to the top of the ListBox using a Style but I would like to have that item scrolled off the top until a user pulls it down. Is there a way to set a default scroll position in the Style or in Template? I've read a few example of scrolling to a particular item once there is data using listBox.ScrollToItem, but that didn't work in my test application, or getting a handle on the ScrollViewer and using ScrollToVerticalOffset.
<phone:PhoneApplicationPage.Resources>
<Style x:Key="StoryStyle" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">
<StackPanel>
<Button Content="Refresh"></Button>
<ItemsPresenter/>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:Panorama ItemsSource="{Binding Programs}" x:Name="AllPrograms">
<controls:Panorama.Title>
<TextBlock></TextBlock>
</controls:Panorama.Title>
<controls:Panorama.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</controls:Panorama.HeaderTemplate>
<controls:Panorama.ItemTemplate>
<DataTemplate>
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Stories}" Style="{StaticResource StoryStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="80">
<TextBlock Text="{Binding SensibleTitle}" TextWrapping="Wrap" />
<TextBlock><Run Text="{Binding Duration, StringFormat='hh\\:mm\\:ss'}"></Run><Run Text=", "/><Run Text="{Binding DisplayDate, StringFormat='MMMM dd, yyyy'}"/></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</controls:Panorama.ItemTemplate>
</controls:Panorama>
</Grid>
Try changing SelectedIndex for ListBox.

Resources