I'm developing Windows phone apps using VS2012 and C#(Windows 8.0 SDK) and I'm new to it, I'm using the below code to bind PNG image using Converter
xmlns:myproject="clr-namespace:SolutionName.Converters"
<UserControl.Resources>
<myproject:LoginHistoryImageConverter x:Key="LoginHistoryImageConverter"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="{StaticResource pivotBackground}">
<ListBox x:Name="listBoxLogs">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid MinWidth="480" Height="88" Margin="12,0,12,0" HorizontalAlignment="Stretch">
<Image Width="80" Height="80" Source="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="85,0,0,0" VerticalAlignment="Center">
<TextBlock FontSize="25" Text="{Binding date}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left"/>
<TextBlock FontSize="25" Text="{Binding ip_address}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left" MaxWidth="200"/>
</StackPanel>
<StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,38,0">
<TextBlock FontSize="18" Text="{Binding time}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right"/>
<TextBlock FontSize="18" Text="{Binding location}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right" MaxWidth="200"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
you can observe I'm binding image
<Image Width="80" Height="80" Source="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/>
I'm getting device as string "M" or "PC", by using converter, I returned BitmapImage
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
String text = (String)value;
if (text.Equals("M"))
{
return new BitmapImage(new Uri("Resources/Assets/mobile.png",UriKind.Relative));
}
else
{
return new BitmapImage(new Uri("Resources/Assets/pc.png", UriKind.Relative));
}
}
when i get string "M" i need to display mobile image else PC image
But when i navigate to my page it fires an XamlParseException at "InitializeComponent()", Please observe image
Even i tried below code for binding image, but no luck
<Image Width="80" Height="80">
<Image.Source>
<BitmapImage UriSource="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/>
</Image.Source>
</Image>
Did I miss something. Please help me
Full XAML Code
<phone:PhoneApplicationPage
x:Class="SampleProject.Views.Settings.Logs.LoginHistory"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:myproject="clr-namespace:SampleProject.Converters"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<UserControl.Resources>
<myproject:LoginHistoryImageConverter x:Key="LoginHistoryImageConverter"/>
</UserControl.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="{StaticResource pivotBackground}">
<ListBox x:Name="listBoxLogs">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid MinWidth="480" Height="88" Margin="12,0,12,0" HorizontalAlignment="Stretch">
<Image Width="80" Height="80" Source="{Binding device, Converter={StaticResource LoginHistoryImageConverter}}"/>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="85,0,0,0" VerticalAlignment="Center">
<TextBlock FontSize="25" Text="{Binding date}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left"/>
<TextBlock FontSize="25" Text="{Binding ip_address}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Left" MaxWidth="200"/>
</StackPanel>
<StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,38,0">
<TextBlock FontSize="18" Text="{Binding time}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right"/>
<TextBlock FontSize="18" Text="{Binding location}" Foreground="{StaticResource MessageListForeground}" HorizontalAlignment="Right" MaxWidth="200"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</phone:PhoneApplicationPage>
First, there's a few issues in the XAML code you provided. The pivotBackground and MessageListForeground resources aren't defined but maybe you defined them at a global level, for instance in the App.xaml, in which case it should fine.
Otherwise, your code should work. You can get more information on the precise cause of failure by checking the details of the exception: when the exception occurs, like you showed in your screenshot, click on "View details", then expand and check the value of the Message and InnerException properties:
Related
I am developing a windows store app using Universal Windows 8.1 framework. I know it's outdated but my project is suppose to be using this framework so can't help it.
Now the problem is that I have successfully made it horizontal for the desktop, but for the mobile I want it vertical, but it is still showing horizontal. I used gridview for horizontal and for phone listview but still no result.
Here is the xaml code
<Page
x:Class="MedicinesApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MedicinesApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<CollectionViewSource x:Name="FruitsCollectionViewSource" IsSourceGrouped="True"/>
<DataTemplate x:Key="template">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
</Page.Resources>
<ListView
ItemsSource="{Binding Source={StaticResource FruitsCollectionViewSource}}"
x:Name="FruitGridView"
Padding="30,20,40,0"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="FruitGridView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Path=DiseaseImageSource}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Disease Name" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Path=DiseaseName}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Category of Disease" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,87,10"/>
<TextBlock Text="{Binding Path=CategoryOfDisease}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Vertical" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
What am I missing?
Define both datatemplates in XAML resources (give them keys TemplateHori and TemplateVerti for example)
<Page.Resources>
<DataTemplate x:Key="TemplateHori">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="TemplateVerti">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
</Page.Resources>
add page size changing event in constructor:
public MainPage()
{
this.InitializeComponent();
Window.Current.SizeChanged += Current_SizeChanged;
}
and in page size changing event compare with and height:
void Current_SizeChanged(object sender, Window.UI.Core.WindowSizeChangedEventArgs e)
{
var b=Window.Current.Bounds;
if (b.Width>b.Height)
{
FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateHori"];
}
else
{
FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateVerti"];
}
}
I need to bind an array of objects in ItemsSource , but not bind in the standard way , ie on row , but on columns , so two different xaml objects in succession .
Let me explain, I now have solved so :
but I would need to turn the view and make it to the grid as well :
In this case I have two objects to bind to each row , so I find it hard bindare objects from the array in succession on two different columns at the same time , my xaml code :
<surface:SurfaceScrollViewer x:Name="listDocumentsVisibility" Visibility="Visible" Grid.Column="1" Grid.Row="0" Margin="15,36,15,35" Background="GhostWhite" VerticalScrollBarVisibility="Hidden" PanningMode="Both">
<ItemsControl ItemsSource="{Binding Path=AttachmentsFileList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<surface:SurfaceButton Tag="{Binding ATID}" Click="Meeting_Click">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="10,5,0,0" Grid.Column="0">
<Image Width="26" Margin="5,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Source="/Resources/Images/icon-document-browser.png"></Image>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-30,0,0" FontSize="12" Text="{Binding Name}"></TextBlock>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-15,0,0" FontSize="9" Foreground="#6C6C6C" Text="{Binding LastOpenDate}"></TextBlock>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-3,0,0" FontSize="9" Foreground="#6C6C6C" Text="istituto"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="0" Margin="10,5,0,0" Grid.Column="1">
<Image Width="26" Margin="5,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Source="/Resources/Images/icon-document-browser.png"></Image>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-30,0,0" FontSize="12" Text="{Binding Name}"></TextBlock>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-15,0,0" FontSize="9" Foreground="#6C6C6C" Text="{Binding LastOpenDate}"></TextBlock>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-3,0,0" FontSize="9" Foreground="#6C6C6C" Text="istituto"></TextBlock>
</StackPanel>
</Grid>
</StackPanel>
</ControlTemplate>
</Button.Template>
</surface:SurfaceButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</surface:SurfaceScrollViewer>
obviously the whole is dynamic , depending on the rest call I receive.
can bind two array index , one next to another in the same row ?
Thank you
Use an ItemsControl and set the ItemsPanel to be a UniformGrid with Columns=2, just make sure you set VerticalAlignment="Top" so that the items don't get stretched out and wrap the whole thing in a ScrollViewer if you need to:
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding MyItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2" VerticalAlignment="Top" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
In my MainPage PanoramaItem2 I have a TextBlock. How can I set the text of the TextBlock from another class?
I tried creating an instance of the MainPage and then finding the TextBlock but I couldn't find it. It is not in there.
This is the way I tried:
public async Task<Problem> DownloadFileFromWeb(Uri uriToDownload, string fileName, CancellationToken cToken)
{
var MainText = new MainPage();
//Set text here;
//MainText.Panorama2.DLText.Text = "New text";
}
This is my MainPage's xaml:
<phone:PhoneApplicationPage
x:Class="PanoramaApp2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!-- LOCALIZATION NOTE:
To localize the displayed strings copy their values to appropriately named
keys in the app's neutral language resource file (AppResources.resx) then
replace the hard-coded text value between the attributes' quotation marks
with the binding clause whose path points to that string name.
For example:
Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
This binding points to the template's string resource named "ApplicationTitle".
Adding supported languages in the Project Properties tab will create a
new resx file per language that can carry the translated values of your
UI strings. The binding in these examples will cause the value of the
attributes to be drawn from the .resx file that matches the
CurrentUICulture of the app at run time.
-->
<!--Panorama control-->
<phone:Panorama Title="my application">
<phone:Panorama.Background>
<ImageBrush ImageSource="/PanoramaApp2;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem x:Name="Panorama1" Header="first item">
<!--Single line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,-6,0,12">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem x:Name="Panorama2" Header="Songs">
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}" Tap="LongListSelector_Tap">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Name="DLText" Text="{Binding StatusText, Mode = TwoWay}"
Style="{StaticResource PanoramaItemHeaderTextStyle}"
Grid.Row="0"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
<Image Source="{Binding PlayPhoto}" Width="50" Height="50" HorizontalAlignment="Left" Tap="Image_Tap_1"/>
<Image Source="{Binding DownloadPhoto}" Width="40" Height="40" HorizontalAlignment="Right" Tap="Image_Tap"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item three-->
<phone:PanoramaItem Header="third item" Orientation="Horizontal">
<!--Double wide Panorama with large image placeholders-->
<Grid>
<StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
</StackPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,12,0,0">
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
</StackPanel>
</StackPanel>
</Grid>
</phone:PanoramaItem>
</phone:Panorama>
<!--Uncomment to see an alignment grid to help ensure your controls are
aligned on common boundaries. The image has a top margin of -32px to
account for the System Tray. Set this to 0 (or remove the margin altogether)
if the System Tray is hidden.
Before shipping remove this XAML and the image itself.-->
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
</Grid>
What am I missing here?
I am on WP8.1
You won't be able to modify the text that way anyway, because it's inside a template. You should use a binding to set the text:
<TextBlock Name="DLText" Text="{Binding StatusText,Mode=TwoWay}"
Style="{StaticResource PanoramaItemHeaderTextStyle}"
Grid.Row="0"/>
Add the "StatusText" property to the same view-model that contains "Items".
Then it's just a matter of updating the view-model property. If "MainPage" is in the current frame, then you could use something like the following:
// WinRT
// var frame = (Frame)Windows.UI.Xaml.Window.Current.Content;
// var page = (MainPage)frame.Content;
// Silverlight
var page = (MainPage)Application.Current.RootVisual;
var viewmodel = (MyViewModel)page.DataContext;
viewmodel.StatusText = "new text";
I have a WPF window with rounded corners
<Window x:Name="windowPortal" x:Class="ICS2GO.PortalWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Portal" Height="301" Width="489" Icon="/Resources/icon.ico"
WindowStyle="None" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" Closing="Window_Closing" Background="Transparent" AllowsTransparency="True">
<Border Name="windowBorder" BorderThickness="2" BorderBrush="DarkBlue"
CornerRadius="20" Background="LightBlue" Margin="0,0,0,0">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
//main controls, buttons, images ...etc here
<Grid x:Name="gdWait" >
<Grid Background="Black" Opacity="0.5"/>
<Label x:Name="lblStatus" Content="Please Wait"
HorizontalAlignment="Center" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,51,28,62"
Height="72" Width="410"/>
<ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30"
Margin="110,108,0,0" VerticalAlignment="Top" Width="243"
IsIndeterminate="True" Orientation="Horizontal"/>
</Grid>
</Grid>
Grid x:Name="gbWait" is displayed over all main controls with a black background and opacity set as to allow some visablility of the main controls but alway renders them unclickable by the user
I would like to make Grid gbWait's corners rounded as well so it matches with the Window's rounded corners. Currently they are square and extend passed the window corner where it is normal square.
Use the Clip property of the Border as follows to achieve your requirement.
<Border Name="windowBorder" BorderThickness="2" BorderBrush="DarkBlue"
CornerRadius="20" Background="LightBlue" Margin="0,0,0,0">
<Border.Clip>
<RectangleGeometry RadiusX="20" RadiusY="20" Rect="0,0,489,301" >
</RectangleGeometry>
</Border.Clip>
<Grid></Grid>
</Border>
This solution assumes your windows size is 489 x 301 and it is not resizable. If you need solution for resizable window then use converter to calculate the Rect values of RectangleGeometry.
I think this might be a good candidate for a converter.
Place this piece of code in your code-behind, or a separate file if you want:
public class VisibilityToBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
var visible = (Visibility)value;
return visible == Visibility.Visible
? new SolidColorBrush(System.Windows.Media.Color.FromRgb(70, 130, 180))
: new SolidColorBrush(System.Windows.Media.Color.FromRgb(173, 216, 230));
}
public object ConvertBack(object value, Type targetType,
object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Then reference it in your XAML (remove <Grid Background="Black" Opacity="0.5"/>):
<Window.Resources>
<l:VisibilityToBrushConverter x:Key="converter" />
</Window.Resources>
<Grid>
<Border Name="windowBorder" BorderThickness="2" BorderBrush="SteelBlue" CornerRadius="20"
Background="{Binding ElementName=gdWait, Path=Visibility, Converter={StaticResource converter}}" Margin="0,0,0,0">
<Grid x:Name="gdWait" Visibility="Visible">
<Label x:Name="lblStatus" Content="Please Wait" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,51,28,62" Height="72" Width="410"/>
<ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30" Margin="110,108,0,0" VerticalAlignment="Top" Width="243" IsIndeterminate="True" Orientation="Horizontal"/>
</Grid>
</Border>
</Grid>
I suggest that you make a rounded border with paddings, and with same background as your Grid
<Border CornerRadius="10" Padding="10" Background=Black>
<Grid x:Name="gdWait" Visibility="Collapsed">
<Grid Background="Black" Opacity="0.5"/>
<Label x:Name="lblStatus" Content="Please Wait" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,51,28,62" Height="72" Width="410"/>
<ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30" Margin="110,108,0,0" VerticalAlignment="Top" Width="243" IsIndeterminate="True" Orientation="Horizontal"/>
</Grid>
</Border>
Try this
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:hp="clr-namespace:WpfApplication2"
Title="Portal" Height="301" Width="489" Template="{DynamicResource WindowTemplate}" WindowStyle="None" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" Background="Transparent" AllowsTransparency="True">
<Window.Resources>
<ControlTemplate x:Key="WindowTemplate">
<Border BorderBrush="DarkBlue" Background="LightBlue" BorderThickness="2" Margin="5" CornerRadius="20">
<Border BorderBrush="DarkBlue" Background="#576C73" Margin="5" BorderThickness="2" CornerRadius="20">
<Grid VerticalAlignment="Stretch" Background="#576C73" HorizontalAlignment="Stretch" Margin="5">
<Grid x:Name="gdWait" Margin="5" Background="#576C73" >
<Grid Background="#576C73"/>
<Label x:Name="lblStatus" Content="Please Wait" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,0,28,62" Height="72" Width="410"/>
<ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30" Margin="110,108,0,0" VerticalAlignment="Top" Width="243" IsIndeterminate="True" Orientation="Horizontal"/>
</Grid>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Window.Resources>
i have changed the window template ..and it is working on different size of window.. sorry if i am wrong to your requirement.
I've a strange problem with xaml.
Visual studio for wp tell me that the xaml is not valid but when I execute the app it works fine.
<phone:PhoneApplicationPage
x:Class="Friends_And_Money.ContList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Friends_And_Money"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot รจ la griglia radice in cui viene inserito tutto il contenuto della pagina-->
<phone:PhoneApplicationPage.Resources>
<local:ContactPictureConverter x:Key="ImageConverter" />
<DataTemplate x:Key="AddrBookGroupHeaderTemplate">
<Border Background="Transparent" Padding="5">
<Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62"
Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
<TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6"
FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
<Setter Property="GridCellSize" Value="113,113"/>
<Setter Property="LayoutMode" Value="Grid" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
<TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6"
Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="AddrBookItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="0,5,0,5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5" ></ColumnDefinition>
<ColumnDefinition Width="auto" ></ColumnDefinition>
<ColumnDefinition Width="5" ></ColumnDefinition>
<ColumnDefinition Width="auto" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="{Binding Photo, Converter={StaticResource ImageConverter}}" Grid.Column="1" Width="62" Height="62" Stretch="Fill" />
<TextBlock Grid.Column="3" FontWeight="Light" FontSize="40" Text="{Binding FirstName}" />
</Grid>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contiene il nome dell'applicazione e il titolo della pagina-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="{Binding Path=LocalizedResources.ContactTitle, Source={StaticResource LocalizedStrings}}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - inserire ulteriore contenuto qui-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector x:Name="LongList"
Background="Transparent"
GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
ItemTemplate="{StaticResource AddrBookItemTemplate}"
JumpListStyle="{StaticResource AddrBookJumpListStyle}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
I've followed the tutorial (with the difference of a longlistselector) from here : [http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh286418(v=vs.105).aspx][1]
How I say all works fine, longlistselector show me images and contact's name.
Struct to show:
namespace Friends_And_Money
{
class ContactStruct
{
public string FirstName
{
get;
set;
}
public WriteableBitmap Photo
{
get;
set;
}
public ContactStruct(string name, WriteableBitmap photo)
{
this.FirstName = name;
this.Photo = photo;
}
}
}
Thanks to every one that help.
New details:
The error is signed in datatemplate AddrBookItemTemplate and I've noted that if I leave image source attribute the error disappear.
So seems be something with the binding.
Visual studio for wp tell me that the xaml is not valid but when I execute the app it works fine.
Please ignore the designer. It's rather moody.
It's maybe a bad copy / paste, but your first element (<phone:PhoneApplicationPage>) is not close.