Windows Phone 8.1 app ProgressRing not showing - windows

I am trying to show a progressring while storing data but I can not get it to show. My Xaml looks as follows:
<Page
x:Class="MyApp.MyPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Model="using:MyApp.Model"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.BottomAppBar>
<CommandBar Height="58">
<AppBarButton Icon="Save" Label="" Click="AddAppBarButton_Click"/>
</CommandBar>
</Page.BottomAppBar>
<Grid x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0">
<TextBlock Text="Name" Style="{ThemeResource BaseTextBlockStyle}" Margin="0,12,0,0"/>
<TextBox x:Name="nameTextBox" Margin="0,10,21.833,0" />
<TextBlock Text="Item" Style="{ThemeResource BaseTextBlockStyle}" Margin="0,12,-4.167,0"/>
<TextBox x:Name="itemTextBox" Margin="0,10,96.833,0" PlaceholderText="" Grid.ColumnSpan="2" />
<AppBarButton Grid.Column="1" HorizontalAlignment="Left" Icon="AddFriend" Label="" Margin="88.167,-2,0,0" VerticalAlignment="Top" Height="66" Click="ItemAppBarButton_Click"/>
<Grid Margin="0,0,-0.167,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<ListView x:Name="ItemListView" Height="379" Margin="0,10,21.833,0" IsItemClickEnabled="True" ItemClick="ItemListView_ItemClick">
<ListView.DataContext>
<Model:Person/>
</ListView.DataContext>
</ListView>
</StackPanel>
<ProgressRing Name="BusyProgressRing" HorizontalAlignment="Left" Margin="169,299,0,0" VerticalAlignment="Top"/>
</Grid>
</Page>
When I do:
BusyProgressRing.IsActive = true;
It does not show. Because at the end of my member function I do a BusyProgressRing.IsActive = false; and the rendering of the ring only occurs after my whole function is done.
Does anyone know how to solve this?

Yes, because ProgressRing does not appears in design time. It appears just in Runtime. You will see it when you deploy the application.
Additionally, ProgressRing always appears in the center of the screen. You don't have to write code for this.

Tested your code and the ProgressRing works. I did remove the margins and correct issue with row/column position of some UI element in your code and add
IsActive = "True"
to the ProgressRing. Your original code (with the margins) puts ProgressRing outside visible area when tested on my desktop.

Related

Xamarin Forms Image doesn't get shown

I have a problem. I want to use an IconView to change the color of an Image, so I use this project: https://github.com/andreinitescu/IconApp.
Now I added the Renderers in both IOS and Android and I added the IconView.cs class to the project. In my xaml I am trying to use the following code:
<controls:IconView Source="ledstrip" Grid.RowSpan="2" Grid.Column="0" Margin="5" Foreground="Red" />
But when I run my app, nothing shows up and I have no clue what I am doing wrong? If I create the following Image:
<Image Source="ledstrip" Grid.RowSpan="2" Grid.Column="0" Margin="5" />
The image gets shown!
Here is my full XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:Bluepixel.Tools"
mc:Ignorable="d"
x:Class="Bluepixel.Pages.Devices">
<StackLayout Orientation="Vertical">
<ListView ItemsSource="{Binding knownDeviceList}" SelectionMode="None" RowHeight="90" ItemTapped="device_Clicked" x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Command="{Binding Path=BindingContext.DeleteDevice, Source={x:Reference MyListView}}}"
CommandParameter="{Binding Id}"
Text="Delete" IsDestructive="True" />
</ViewCell.ContextActions>
<AbsoluteLayout HeightRequest="70" Margin="20,10,20,10">
<StackLayout Opacity="0.3" BackgroundColor="White"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<controls:IconView Source="ledstrip" Grid.RowSpan="2" Grid.Column="0" Margin="5" Foreground="Red" />
</Grid>
</StackLayout>
</AbsoluteLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
What am I doing wrong?
The library is not use to change the color of an Image, if you see the source code in the renderer in the iOS project, it changes the tintColor of UIImage in iOS:
var uiImage = new UIImage(Element.Source);
uiImage = uiImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
Control.TintColor = Element.Foreground.ToUIColor();
Control.Image = uiImage;
You can see the document and this thread to know how tint color works.
After some test, I found if you use a image which background is transparent, the image will show successfully with this plugin.
I uploaded a sample project here and there are several images you can test under resource folder. I think it's the same behavior in Android.

How to create swipeable ListView renderer in Xamarin UWP

I have an application that consists of a TabbedPage that holds custom ContentViews.
In the main ContentView I have a custom ListView, that has a ListViewRenderer in Xamarin UWP.
The ListView items have a template:
<DataTemplate x:Key="ListViewItemTemplate">
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- TEXT -->
<TextBlock Grid.Column="0"
Margin="5"
VerticalAlignment="Center"
Foreground="Black"
Text="{Binding ActualText}"
TextWrapping="WrapWholeWords" />
<!-- CC -->
<my:CustomControl Grid.Column="1"
ActualCValue="{Binding ActualValue, Mode=TwoWay}" />
<!-- PICKER -->
<ComboBox x:Name="cboxPicker"
Grid.Column="2"
Width="90"
Margin="3"
VerticalAlignment="Center"
ItemsSource="{StaticResource dataSource}"
SelectedIndex="{Binding ActualValue,
Mode=TwoWay}" />
<!-- SEP -->
<Border Grid.Row="1"
Grid.ColumnSpan="3"
BorderBrush="Gray"
BorderThickness="1" />
</Grid>
</DataTemplate>
Unfortunately, when I try to use swipe, the tabs are not changing.
If I use the built-in Xamarin.Forms ListView with items consisting of an image and text, it works normally.
It might be related to the Button's capturing of the focus (assumption).
What should I change to make my custom ListViewRenderer work with swipe?
As I was using a ListViewRenderer, there was no ListView in the XAML code (it is only provided by the renderer).
The problem however was with the ListView configuration I used in my custom renderer.
I had this:
(Control as SemanticZoom)?.ManipulationMode = Windows.UI.Xaml.Input.ManipulationModes.None;
Now I use this, and the swipe works normally:
(Control as SemanticZoom)?.ManipulationMode = Windows.UI.Xaml.Input.ManipulationModes.System;

Change grid Column width inside the listbox on Usercontrol at Mainpage code behind

I have an ListBox UserControl and there is a grid control in the DataTemplate. I used the MVVM to bind the data. For Orientation change, I am able to change the wide of the ListBox, but I don't find the solution to change the grid column width inside the listbox. Would you help me how to do it or provide a example or link to me. Thanks in advance.
There is my UserControl.xaml
<UserControl x:Class="CMSPhoneApp.QueueListControl"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
xmlns:local="clr-namespace:CMSPhoneApp" >
<UserControl.Resources>
<local:VisibilityConverter x:Key="VisibilityConverter"/>
<local:ColumSpanConverter x:Key="ColumSpanConverter"/>
</UserControl.Resources>
<ListBox x:Name="lst" HorizontalAlignment="Left" Margin="6,6,0,0" VerticalAlignment="Top" Width="400"
ItemsSource="{Binding Path=MyQueue}"
SelectedItem="{Binding Path=CurrentQueue, Mode=TwoWay}" Height="380" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1,1,1,1" BorderBrush="Blue">
<Grid x:Name="grd" Width="auto" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="125" />
</Grid.ColumnDefinitions>
<Image Source="{Binding Type}" Grid.Row="0" Grid.Column="0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan= "{Binding isSpan, Converter={StaticResource ColumSpanConverter}}" Text="{Binding summary}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextAccentStyle}" />
<Button x:Name="btnAction" Grid.Row="0" Grid.Column="3" ClickMode="Press" Click="btnAction_Click" Style="{StaticResource ButtonStyle1}"
Visibility="{Binding isVisibility, Converter={StaticResource VisibilityConverter}}"
Tag="{Binding callNumber}">
<Button.Content>
<TextBlock Width="85" Height="70" Text="{Binding ActionCaption}"
Style="{StaticResource LabelStyle_20}" />
</Button.Content>
</Button>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The OrientationChange code:
private void TestPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
{
ListBox lstControl = lst.lst;
Grid g = lstControl.ItemContainerGenerator.ContainerFromIndex(0) as Grid;
if (e.Orientation.ToString().Contains("Portrait"))
lst.lst.Height = 400;
else
lst.lst.Height = 120;
}
Instead of absolute values for the column width, you should use percentage or "Star Sizing". Star sizing allows the width of a column (or height of a row) to grow or shrink as the available size changes.
Here is an example to use:
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".1*" />
<ColumnDefinition Width=".6*"/>
<ColumnDefinition Width=".3*" />
</Grid.ColumnDefinitions>
Along with this you should remove the Width value of the ListBox and allow it to fill all available space.

Slow Page loading when using ExpanderView & Binding (Windows Phone 7)

I have a Panorama control, which has an ExpanderView Item (from Silverlight toolkit).
My client wants this page to be customizable. Thats why I created 3 level of binding:
The PanoramaItems, the ExpanderView headers and the ExpanderView content.
The problem when I set the itemssource of the Panorama control. it takes about 5 seconds to show the items.
Any idea how I can solve this?
C# code:
private void panorama_Loaded(object sender, RoutedEventArgs e)
{
this.DataContext = App.Products;
}
XAML Code:
<controls:Panorama Loaded="panorama_Loaded" x:Name="panorama" ItemsSource="{Binding}">
<controls:Panorama.ItemTemplate>
<DataTemplate>
<ListBox ItemsSource="{Binding Sub_Products}" >
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:ExpanderView Header="{Binding}" Expander="{Binding}" ItemsSource="{Binding Sub_Sub_Products}">
<toolkit:ExpanderView.ExpanderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image VerticalAlignment="Center" Source="Images/List.png" Width="25" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</toolkit:ExpanderView.ExpanderTemplate>
<toolkit:ExpanderView.ItemTemplate>
<DataTemplate>
<Grid Margin="-30,0,0,0" Background="White" Width="450" Tap="Grid_Tap" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding ImageSource}" />
<StackPanel VerticalAlignment="Top" Grid.Column="1">
<TextBlock Text="{Binding Title}" />
<TextBlock Text="{Binding Description}" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<TextBlock Margin="0,12,32,0" Grid.Row="1" Text="Learn more" />
</StackPanel>
</Grid>
</DataTemplate>
</toolkit:ExpanderView.ItemTemplate>
</toolkit:ExpanderView>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</controls:Panorama.ItemTemplate>
</controls:Panorama>
You could try to collapse the panorama items that are off screen and only set visibility to visible on demand. That should at least reduce the size of the visible tree.
A good way to find the slow parts is to use the profiler in Visual Studio. You will find one frame which is really slow (it will have a render time of 5 seconds in your case). Then dig into the visual tree of that frame and see which elements took a long time to render and try to optimize these.
Remove the ExpanderView ItemsSource binding in xaml and bind to it when the Expander is manupulated in code. Just leave it as ItemsSource="{Binding}". That way you will dynamically build you visual tree as the user taps on the expander.
The event handler is something like below. I am assuming Product is the type in your App.Products list. Also ensure that you hook up the event in your xaml for the expander.
private void ExpanderView_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
{
var expander = sender as ExpanderView;
expander.ItemsSource = (expander.DataContext as Product).Sub_Sub_Products;
}
Hope this solves your slow loading issues and is not too late at this time.

How do you design a screen similar to email app in windows phone 7?

Does anyone have the xaml to get the look and feel of this UI?
This is one way we can do your UI:
<ListBox x:Name="contentList" SelectionChanged="OnFileHit">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Marc Boyer" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="Inviation check this out here" Grid.Row="1" FontSize="{StaticResource PhoneFontSizeMedium}" Foreground="GreenYellow"/>
<TextBlock Text="When: Thursday 9 PM" Grid.Row="2" FontSize="{StaticResource PhoneFontSizeNormal}" Opacity="0.5"/>
<TextBlock Text="9.45" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" FontSize="{StaticResource PhoneFontSizeNormal}"/>
<Image Grid.Row="1" Grid.Column="1" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
u Should use panorama and pivot pages to get this kinda UI. Its not very difficult to design such UI but i currently don't have a similar looking screen. probably this link might help u better.
http://www.silverlightshow.net/items/Windows-Phone-7-Part-5-Panorama-and-Pivot-controls.aspx
and also this
http://windowsphonegeek.com/articles/WP7-Navigation-in-depth--Navigation-controls
I found this cool templates that I think others will find it useful.
http://wp7designtemplates.codeplex.com/
the page and tabs are done using the pivot control, there is a template you can choose when you create a new project that has it in by default and also shows how you can create custom list items

Resources