I would like to have a popup window. Even though I am using MvvmCross, it will strictly run on Android. In Windows Store, you can do the following with xaml:
<Popup VerticalOffset="300" HorizontalOffset="200" x:Name="SigPopup" >
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="1">
<StackPanel>
<StackPanel Orientation="Horizontal" >
<Button x:Name="btnAccept" Content="Accept" Click="btnAccept_Click"/>
<Button x:Name="btnCancel" Grid.Column="1" Content="Cancel" Click="btnCancel_Click"/>
<TextBlock x:Name="txtSigner" Text="Shipper" Style="{StaticResource SubheaderTextBlockStyle}" Margin="25,3,0,0" />
</StackPanel>
<!-- Inking area -->
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="750" Height="175">
<Grid x:Name="inkPanel" Margin="5">
<!-- Inking area -->
<Canvas x:Name="InkCanvas" Background="White" Margin="5" />
</Grid>
</Border>
</StackPanel>
</Border>
</Popup>
You can use this to popup a window to collect a Signature. There is an accept and cancel button you can wire up accordingly. Is there any way to do this using MvvmCross? I have watched the ViewModel demo and saw where you could draw rectangles and put data in them and it was bound, but it didn't show how to make them go away once you were done. I had this vision of being able to popup some sort of child ViewModel with a SignatureWidget in it and collect a signature then close the popup. Can this be done using MvvmCross?
there is a Xamarin Component available.
Is this something that fits your need?
http://components.xamarin.com/view/signature-pad
Regards,
Benjamin
Related
I have a little question. I'm new to WPF and a strange thing happened to me. In the designer everything looks fine, but as soon as I start the application, a piece ,,cuts off"(via.photo) and it looks pretty bad. Could it be that the application is not responsive?
My XAML code:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}" Height="Auto"
Width="Auto"
>
<Border
Background="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="1340"
Height="1100"
CornerRadius="20"
>
<Border
Background="White"
CornerRadius="20"
Height="700"
Width="500"
Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"
>
<Grid
>
<TextBlock
Text="Welcome"
Width="200"
Height="200"
Foreground="Black"
FontSize="50" FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"
>
</TextBlock>
</Grid>
</Border>
</Border>
</TabItem>
After what I edited app:
Your code has a few issues:
You're hardcoding the Margin values to position your controls. Instead, you should use proper panels (DockPanel, WrapPanel, and Grid). Use Margin property to set margin, not a position.
Use HorizontalAlignment and VerticalAlignment properties to position your elements, thus your UI would be more responsive and user-friendly.
To be able to view, how your window and its content would look like - try to set d:DesignHeght and d:DesignWidth properties on a window. Try to Google how to use them.
In the end, your code should look like following:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}"> <!-- Properties order is a bit confusing, it is better to order them by priority, or just alphabetically. -->
<Border Background="Black">
<Border Background="White"
CornerRadius="20"
Margin="0,0,93,118"> <!-- Should it have such values? Maybe just somenthing like Margin="0 0 90 120"? -->
<Grid>
<TextBlock Text="Welcome"
Foreground="Black"
FontSize="50"
FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"/>
</Grid>
</Border>
</Border>
</TabItem>
In my Windows Phone 8 application, i am using one usercontrol to display in all pages.
UserControl XAML code:
<Canvas x:Name="ExpiryPopUp_Container" Margin="0,0,0,0" Background="Transparent" Width="Auto" Height="Auto">
<Border x:Name="Delete" Background="#FFFFFFFF" CornerRadius="10,10,10,10" BorderBrush="#8ca5b9" BorderThickness="2" Height="180" Canvas.Left="58" Canvas.Top="320" Grid.Row="1" Width="360">
<Canvas>
<Border Background="{StaticResource LeftNavBackground}" Height="50" CornerRadius="10,10,0,0" Width="356">
<TextBlock FontSize="26" TextAlignment="Center" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Text="Alert" Width="356" Canvas.Top="10" Height="28"/>
</Border>
<TextBlock Text="Oops! Something went wrong with network connection" TextWrapping="Wrap" FontSize="22" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" TextAlignment="Center" Foreground="{StaticResource BlueText}" Canvas.Top="62" Width="356"/>
<Border x:Name="BorderOk" Background="{StaticResource buttonBackground}" Height="40" Width="98" Canvas.Left="132" Canvas.Top="125" Tap="BorderOk_Tap_1">
<TextBlock TextAlignment="Center" Text="Ok" FontSize="26" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Canvas.Top="14" Margin="10,5,10,2"/>
</Border>
</Canvas>
</Border>
</Canvas>
For Border with name BorderOk has Tap event. I am using this usercontrol throughout my application,almost in all pages. Once user tap on the border it will navigate to MainPage.xaml, but my problem is in some pages i want it to not navigate (means the functionality of tap event to be changed). So can i achieve this by using same usercontrol?If so, how to do it?
One thing you can do is adding a parameter to your user control, for example "shouldNavigate" and set it everytime you use it(or have a default value of true and change it to false in your special situation). Use the value of this parameter in Tap event.
It's been discussed a number of times on SO, check it out: How to read a passed parameter in a WPF UserControl?
I have a basic WPF windows with the markup as specific below:
<Window x:Class="Application.SomeWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SomeWindow"
Topmost="True" WindowStyle="None" Height="39" Width="400"
ResizeMode="NoResize" ShowInTaskbar="False"
WindowStartupLocation="Manual" Background="Transparent"
Closing="Window_Closing" AllowsTransparency="True" Opacity="0">
<Border Background="CornflowerBlue" BorderBrush="Black" BorderThickness="0,0,0,0" CornerRadius="5,5,5,5" Opacity="0.75">
<Grid>
<!-- Display bar -->
<Image Grid.Row="1" Height="24" Margin="7,7,0,0" Name="img1" Stretch="Fill" VerticalAlignment="Top" Source="/Application;component/Images/dashboard/1.png" HorizontalAlignment="Left" Width="13" />
<Image Height="24" Margin="19,7,47,0" Name="image21" Source="/Application;component/Images/dashboard/2.png" Stretch="Fill" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2" />
<!-- Button 1 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,25,0" Name="btn1" Click="btn1_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="1">
<Image Height="26" HorizontalAlignment="Right" Name="img1" Source="/Application;component/Images/dashboard/3.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
<!-- Button 2 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,5,0" Name="btn2" Click="btn2_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="2">
<Image Height="26" HorizontalAlignment="Right" Name="img2" Source="/Application;component/Images/dashboard/4.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
</Grid>
</Border>
</Window>
Here is what it looks like now:
What I'd really like to do is make it so that initially looks like this:
Then, once mouseover happens, to fade background opacity in from 0 so it looks like the first image. The problem is that if I set the Border or Grid Background color to Transparent with the goal of fading in on mouseover, then everything inside the Border or Grid is affected as well.
Is there a way to manage the opacities of window and its UI elements seperately? Or perhaps there is a totally different route to take to get this background fade on mouseover? Thanks.
There are two options. Number one is to just move the outer border inside the grid, as the first child (and have the other controls alongside it, not in it). That way it will fade by itself, but still be behind the other controls. You will of course either have to set ColumnSpan/RowSpan, or wrap the entire thing in another Grid.
The second option is to just fade the background, not the entire border:
<Border ...>
<Border.Background>
<SolidColorBrush Color="CornflowerBlue" Opacity="0.5"/>
</Border.Background>
...
try this trick - draw a rectangle or border with dimensions bind to parent or ElementName.
It won't affect rest of elements of tree. Works for me.
<Grid x:Name="abc">
<Border
Width="{Binding ActualWidth, ElementName=abc}"
Height="{Binding ActualHeight, ElementName=abc}"
Background="Blue"
Opacity="0.5"/>
//buttons or inner grid
...
</Grid>
If you don'w want to use ElementName, simply replace Width and Height by
Width="{Binding ActualWidth, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
Height="{Binding ActualHeight, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
Navigation Guidelines does mention that we can include thumbnails in the Navigation bar(top app bar) for buttons. I have searched for examples but found none.
I have created a basic top app bar.
Could someone help me out?
Appbar with thumbnail doesn't need any special code. Check the below given code. You can put anything within Grid.
<Page.TopAppBar>
<AppBar Height="180" Background="Tan">
<StackPanel Orientation="Horizontal">
<Grid Height="160" Width="200" Background="Red" Margin="10"/>
<Grid Height="160" Width="200" Background="Green" Margin="10"/>
<Grid Height="160" Width="200" Background="Yellow" Margin="10"/>
<Grid Height="160" Width="200" Background="Blue" Margin="10"/>
</StackPanel>
</AppBar>
</Page.TopAppBar>
I am switching to using a ProgressBar/Grid in the Frame of my application instead of via a Popup. I used this stack overflow post to get it working : Dynamic Progress bar In WP7
However, When using the example I no longer have page transitions. It will be hard for me to warrant the use of it if page transitions will not work properly. Is there something I'm missing? I tried setting the TargetType to "TransitionFrame", but that does not work properly and throws a XAML parse exception (for the namespace Microsoft.Phone.Controls.PhoneApplicationPages)
<ControlTemplate x:Key="LoadingIndicatorTemplate" TargetType="toolkit:TransitionFrame" >
<Grid x:Name="ClientArea">
<ContentPresenter />
<Grid x:Name="ProgressGrid" Background="Black" Opacity="0.85" Visibility="Collapsed" Loaded="ProgressGrid_Loaded">
<StackPanel x:Name="Loading" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10">
<TextBlock HorizontalAlignment="Center" Name="tbLoading" Text="Loading" Style="{StaticResource TextNormalStyle}" />
<ProgressBar Style="{StaticResource PerformanceProgressBar}" HorizontalAlignment="Center" Name="pbLoading" Width="400" Margin="10" IsIndeterminate="False" />
</StackPanel>
</Grid>
</Grid>
</ControlTemplate>
For using the Toolkit's TransitionFrame for page transitions as well as a custom ControlTemplate to show your progress bar, you must specify the TargetType for the ControlTemplate as toolkit:Transitionframe where toolkit is defined as:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
The rest of the problem is that your ControlTemplate does not specify the template parts that the TransitionFrame requires. It requires two parts of type ContentPresenter named FirstContentPresenter and SecondContentPresenter. Change your ControlTemplate to the following to bring page transitions back:
<ControlTemplate x:Key="LoadingIndicatorTemplate" TargetType="toolkit:TransitionFrame">
<Grid x:Name="ClientArea">
<ContentPresenter x:Name="FirstContentPresenter" />
<ContentPresenter x:Name="SecondContentPresenter" />
<Grid x:Name="ProgressGrid"
Background="Black"
Opacity="0.85"
Visibility="Collapsed"
Loaded="ProgressGrid_Loaded">
<StackPanel x:Name="Loading"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="10">
<TextBlock x:Name="tbLoading"
HorizontalAlignment="Center"
Text="Loading"
Style="{StaticResource BoaTextNormalStyle}" />
<toolkit:PerformanceProgressBar x:Name="pbLoading"
HorizontalAlignment="Center"
Width="400"
Margin="10"
IsIndeterminate="False" />
</StackPanel>
</Grid>
</Grid>
</ControlTemplate>
NOTE: Jeff Wilcox's PerformanceProgressBar is now part of the Silverlight Toolkit, so you can use it directly as shown above.
If you're putting the progressbar on the frame but then animating the page then the animation won't include the progressbar.
Why not just put the progressbar on the page?