I am developing UWP application, to showing loading process i am using a Custom GIF image as usercontrol. I am adding this GIF image user control to a grid like below.
But while running the GIF it hangs some time..But when i use ProgressRing control it is running perfect.
<Grid
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="ProcessingGrid"
Visibility="{x:Bind VM.IsProcessing ,Mode=TwoWay,Converter={StaticResource BooleanToVisibilityConverter}}">
</Grid>
This is my Usercontrol
<Grid
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.Background>
<SolidColorBrush Color="Black" Opacity="0.3">
</SolidColorBrush>
</Grid.Background>
<Image x:Name="loadingGif" Source="ms-appx:///Assets/GifAssets/ADProcessingIcon.gif"
Width="80">
</Image>
</Grid>
try using "XamlAnimatedGif" library
<page
....
xmlns:gif="using:XamlAnimatedGif"/>
...
<Image x:Name="imgLoading"
gif:AnimationBehavior.SourceUri="/Assets/GifAssets/ADProcessingIcon.gif"/>
...
Related
In my application, I am having a ListView. ListView lists a set of images.
So when the application is running, and when that page is loaded, a list of images are shown.
<ListView ItemsSource="{Binding imageLists}" Background="Red" Tapped="ListView_Tapped">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="Green">
<Image Source="{Binding imagePath}" CacheMode="BitmapCache" Stretch="UniformToFill"/>
<StackPanel Name="imageTitle" Visibility="Collapsed" Background="Blue"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Foreground="White" Text="Dumy Image Title" FontSize="10"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
As you can see from the code, I have one image & stackpanel inside the listview. And the stackpanel's visibility has been set to collapsed for convenience.
The StackPanel imageTitle resides inside the ListView. Stackpanel contains a TextBlock housing the images name. For now it's dumy text.
On Tapping any image in the list, I am trying to make the stackPanel visible.
The Code Behind:
private void ListView_Tapped(object sender, TappedRoutedEventArgs e)
{
imageTitle.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
Since the stackpanel is inside the listview & I am trying to make it visible on the tap event of the listview, I am not able to acheive the needed result. I know my code is wrong.
If I specify the stackpanel outside the listview, I can make it visible using the code I gave inside the ListView_Tapped function. But even in that case, I need to show the stackpanel (name of the image I clicked) inside the listview item (image I clicked).
Any help??
Can this be achieved using only XAML?
Here's a pure xaml way.
Rather than changing the Visibility of the imageTitle (not a great UX), let's change its Opacity to make its appearing more interesting.
First we need to create a storyboard inside this data template. This storyboard will fade in the imageTitle in 400ms.
And then we drag a ControlStoryboard behavior from Expression Blend's Asset panel onto the top level Grid. Basically we want the storyboard to fire off when this Grid is tapped.
Please see below code for reference.
<DataTemplate x:Key="GroupTemplate">
<Grid Background="Green">
<Grid.Resources>
<Storyboard x:Name="ShowImageTitleStoryboard">
<DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageTitle"/>
</Storyboard>
</Grid.Resources>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Media:ControlStoryboardAction Storyboard="{StaticResource ShowImageTitleStoryboard}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Image Source="{Binding Image}" CacheMode="BitmapCache" Stretch="UniformToFill"/>
<StackPanel x:Name="imageTitle" Background="Blue"
HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
<TextBlock Foreground="White" Text="Dumy Image Title" FontSize="10"/>
</StackPanel>
</Grid>
</DataTemplate>
Apart from JustinXL's answer it can also be done by using ChangePropertyAction. Also pure XAML:
<DataTemplate>
<Grid Background="Green">
<Image Source="{Binding imagePath}" CacheMode="BitmapCache" Stretch="UniformToFill">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Tapped">
<ic:ChangePropertyAction TargetObject="{Binding ElementName=imageTitle}" PropertyName="Visibility" Value="Visible"/>
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Image>
<StackPanel Name="imageTitle" Visibility="Collapsed" Background="Blue"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Foreground="White" Text="Dumy Image Title" FontSize="10"/>
</StackPanel>
</Grid>
</DataTemplate>
It's just another way to change a property - JustinXL's answer will provide nice animation with opacity, which will look much better.
I dunno why you specifically want to handle the scenario using XAML. For the Microsoft's recommended MVVM model you should bind a property to your element field and then you can write a converter for the same to return back "Visible" or "Collapse".
I am very new to XAML code, but I want to try and code a personal program. I have started with XAML but anything I add does not show up. Here is my code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Home" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="7,725,0,0" Height="36" Width="91" BorderBrush="Orange" Foreground="Orange" FontFamily="BankGothic Md Bt"/>
<Image HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366" Source="C:/Users/Flynn/Desktop/BG.gif" Visibility="Visible"/>
</Grid>
</Page>
The button nor the image is showing up when I run the program. Can someone point me in the right direction? Thanks for your help!
To set a background to a grid, just keep your image in Images folder and add this code inside grid
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="..\Images\background.jpg" AlignmentY="Top" AlignmentX="Center"/>
</Grid.Background>
Please try this code.It works
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Home" HorizontalAlignment="Left" VerticalAlignment="Top" Height="36" Width="91" BorderBrush="Orange" Foreground="Orange" FontFamily="BankGothic Md Bt"/>
<Image Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" Source="Images/super.jpg"/>
</Grid>
You should define the background property like this
You must add in to App.xaml (for color resource)
<Application.Resources>
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="BlueViolet"/>
</Application.Resources>
Image source have to be in your solution (application)
I'm using Panorama Control, and have image on the top. My XAML code as follow:
<Grid x:Name="LayoutRoot">
<Image Grid.Row="0" Source="/Images/khuyenmai.png" Height="85" Width="85" HorizontalAlignment="Right" x:Name="imgKhuyenMai" Tap="imgKhuyenMai_Tap" VerticalAlignment="Top" Margin="305,5,41,0" RenderTransformOrigin="2.205,-6.523"></Image>
<phone:Panorama Grid.RowSpan="2" Margin="0,0,0,10">
<!--Panorama item one-->
<phone:PanoramaItem Header="item1">
<Grid/>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item2">
<Grid/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
My problem is : "Tap" event is not working ?
In Grid, when Canvas.ZIndex of items is equal, the latter item will cover the ahead item. For example, in your code, Panorama will cover Image item, So you can't Tap it. There are 2 solutions, you can choose one:
set Canvas.ZIndex = 1 on Image
OR
change sort of your code like this, put Image latter than Panorama:
<Grid x:Name="LayoutRoot">
<phone:Panorama/>
<Image/>
</Grid>
I have such DataTemplate:
<DataTemplate x:Name="GreenMarkTemplate">
<Grid Width="64" Height="64">
<Image Source="Assets/Marks/mark_green.png" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="{Binding course}" />
</Image.RenderTransform>
</Image>
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding route_num}" VerticalAlignment="Center" FontSize="16"/>
</Grid>
</DataTemplate>
And I need to rotate Image according to "course" property. At first, Image shows with zero angle and in a moment it rotates. This makes Image blinking.
So, is it possible somehow to make Image invisible and show it only after rotation? or rotate image before rendering it?
Resolved the issue using LayoutTransform port for Windows Phone 8. github link
How do I set the Panorama App Title of a Page as an Image and not a string of text? I have added:
<phone:Panorama>
<phone:Panorama.Background>
<ImageBrush ImageSource="\Assets\image-logo-small.png"/>
</phone:Panorama.Background>
......
However this sets the entire background as the image selected.
Any idea how I can replace the <phone:Panorama Title="Text"> with an Image?
StackOverflow already has similar case in windows 7, Setting image as Panorama Title for Panorama page in wp7
In our case try these
<phone:Panorama >
<phone:Panorama.TitleTemplate>
<DataTemplate>
<StackPanel>
...........
</StackPanel>
</DataTemplate>
</phone:Panorama.TitleTemplate>
..........................
</phone:Panorama >
The following code successfully places an image within Title section of a Panorama App:
<phone:Panorama>
<phone:Panorama.Title>
<Grid Margin="0,80,0,0">
<Image Source="\images\MyImage.png"
HorizontalAlignment="Center"
Width="400" Height="50" />
</Grid>
</phone:Panorama.Title>
....
Try this, for wp8:
<phone:Panorama.TitleTemplate>
<DataTemplate>
<Grid>
<Image Source="/Assets/logo.png">
</Image>
</Grid>
</DataTemplate>
</phone:Panorama.TitleTemplate>
Have fun!!!