I try to make an application to display WebView inside a FlipView
<FlipView Name="mainPage"
<WebView Name="wv1" Source="http://www.google.com/"
Width="1024" Height="768" />
<WebView Name="wv2" Source="http://www.google.co.id/"
Width="1024" Height="768" />
<WebView Name="wv3" Source="http://www.google.co.uk/"
Width="1024" Height="768" />
<WebView Name="wv4" Source="http://www.google.com.sg/"
Width="1024" Height="768" />
</FlipView>
The problem is:
When the SelectedItem on wv2, and wv2 GotFocus it will display wv1, when wv2 LostFocus it will redraw again the wv2.
When the SelectedItem on wv3 or wv4 and GotFocus it will display blank page, when wv3 or wv4 LostFocus it will redraw again wv3 or wv4.
When the SelectedItem on wv1 there is no problem when GotFocus and there is no blinking.
Can anyone help me to give a direction what is wrong and maybe the best implementation for WebView inside of FlipView?
Based on the answer in this forum, just add the FlipView.ItemsPanel inside the FlipView and the problem will solve.
<FlipView Name="mainPage">
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<WebView Name="wv1" Source="http://www.google.com/" Width="1024" Height="768" />
<WebView Name="wv2" Source="http://www.google.co.id/" Width="1024" Height="768" />
<WebView Name="wv3" Source="http://www.google.co.uk/" Width="1024" Height="768" />
<WebView Name="wv4" Source="http://www.google.com.sg/" Width="1024" Height="768" />
</FlipView>
Related
In Xamarin.Forms 3.2.0, Xamarin Forms introduced new New OnPlatform/OnIdiom XAML Extension
As per the blog we can re-write the below code,
<Button Text="Extensions" BackgroundColor="Black" TextColor="White">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Default="40">
<On Platform="iOS" Value="60"/>
<On Platform="Android" Value="80"/>
</OnPlatform>
</Button.HeightRequest>
with the new extension.
<Button Text="Extensions" BackgroundColor="Black" TextColor="White"
HeightRequest="{OnPlatform iOS=60, Android=80, Default=40}"/>
Here my doubt is how I can reuse the same OnIdiom XAML Extension for Margin / Thickness.
You should be able to do it like this: <Button Margin="{OnPlatform Android='10,5,10,0', iOS='10,20,10,0'}" />
It's up to you which syntax you like more!
I'm trying to apply a shadow effect on a button on a UWP application.
I'm using the UWPCommunityToolkit tool and the control DropShadowPanel. Here an example :
http://www.uwpcommunitytoolkit.com/en/master/controls/DropShadowPanel/
So my code for apply on a button control :
<controls:DropShadowPanel BlurRadius="{Binding BlurRadius.Value, Mode=OneWay}"
ShadowOpacity="{Binding Opacity.Value, Mode=OneWay}"
OffsetX="{Binding OffsetX.Value, Mode=OneWay}"
OffsetY="{Binding OffsetY.Value, Mode=OneWay}"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Button Content="My button" />
</controls:DropShadowPanel>
But the result is :
The shadow cover all my button control.
According to the doc Button control doesn't directy inherit from FrameworkElement, that is maybe a reason.
Regards
Hum problem solved by using custom values :
<controls:DropShadowPanel BlurRadius="4.0"
ShadowOpacity="0.70"
OffsetX="5.0"
OffsetY="5.0"
Color="Black"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Button Content="My button" Background="Aqua" />
</controls:DropShadowPanel>
I have tried to embed website using webview but im getting error
here is my XAML code for webview
<WebView x:Name="WebView1" RenderTransformOrigin="0.5,0.5" Margin="658.74,197.148,113.963,221.865" Grid.Row="1" UseLayoutRounding="False" d:LayoutRounding="Auto"
Source="http://www.microsoft.com">
<WebView.RenderTransform>
<CompositeTransform Rotation="30" ScaleX="1" ScaleY="1" SkewX="15" SkewY="0" />
</WebView.RenderTransform>
</WebView>
Why don't you just try it without any RenderTransform? You could simple load a WebView like this:
XAML:
<Grid>
<WebView x:Name="WebView1" Visibility="Collapsed"/>
<Button x:Name="LoadWebPage" Content="Navigate" click="NavigateButton_Click">
</Button>
</Grid>
.cs:
Uri uri= new ("http://www.microsoft.com");
WebView1.Navigate(uri);
Is it possible to make a round image from a squared image on a Windows phone? I have a lot of images which should be displayed as a circle. But how can I do this?
In XAML you want to make the circle using an Ellipse control. Then give it an ImageBrush fill.
<Ellipse Height="100" Width="100">
<Ellipse.Fill>
<ImageBrush ImageSource="YourImage.png"/>
</Ellipse.Fill>
</Ellipse>
My idea is very simple:
<Image Source="ImagePath" Width="326" Height="188">
<Image.Clip>
<EllipseGeometry Center="170,90" RadiusX="90" RadiusY="90" />
</Image.Clip>
</Image>
Or you can apply an OpacityMask to an Image to create a variety of opacity-related photo masking
<Image Source="ImagePath" >
<Image.OpacityMask>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="#ffffffff" Offset="0.5" />
<GradientStop Color="#00ffffff" Offset="0.8" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
You can use Image.Clip but i prefer the #robwirving solution. But you need to choice now!
Information here => http://msdn.microsoft.com/fr-fr/library/system.windows.uielement.clip(v=vs.110).aspx
Here's the code for the GridView Control that I'm using (made on BlankPage App):
<GridView HorizontalAlignment="Left" x:Name="gridView1" Margin="227,220,0,53" Width="1087">
<Button x:Name="XboxButton" Margin="10,10,10,10" Style="{StaticResource XboxButton}" Height="200" Click="SnappedXboxButton_Click_1"/>
<Button x:Name="PS3Button" Margin="10,10,10,10" Style="{StaticResource PS3Button}" Click="SnappedPS3Button_Click_1" />
<Button x:Name="PCButton" Margin="10,10,10,10" Style="{StaticResource PCButton}" Click="SnappedPCButton_Click_1" />
<Button x:Name="DSButton" Margin="10,10,10,10" Style="{StaticResource DSButton}" Click="SnappedDSButton_Click_1" />
<Button x:Name="PSPButton" Margin="10,10,10,10" Style="{StaticResource PSPButton}" Click="SnappedPSPButton_Click_1" />
<Button x:Name="ContactButton1" Margin="10,10,10,10" Style="{StaticResource ContactButton}" Click="SnappedContactButton_Click_1" />
<Button x:Name="PrivacyButton" Margin="10,10,10,10" Style="{StaticResource DisclaimerButton}" Click="SnappedPrivacyButton_Click_1"/>
</GridView>
The problem is when the app first loads it shows the GridView is shown like this:
(Please go here, since, I'm new, I'm not allowed to post images)
http://social.msdn.microsoft.com/Forums/getfile/189014
But when I click any item and GO BACK to the first page the render is fine as shown in this image:
http://social.msdn.microsoft.com/Forums/getfile/189015
Improve tour markup.
1. In the GridView define a style resource for buttons, or in app resources create a base style and then use it in each button style using BasedOn={StaticResource binding notation
2. Set the margin,width,height , as I see all buttons have same property values
3. Id you don't want GridView set width or height values automaticly, ensure you set the values in the styles