how to use webview in xaml - xaml

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);

Related

NavigationView does not show PaneHeader when IsPaneToggleButtonVisible is false

I have an issue with the NavigationView control in my UWP app. When I set the IsPaneToggleButtonVisible to false, my PaneHeader collapses too. Offically this bug was solved, am I doing something wrong?
<NavigationView PaneDisplayMode="Left" IsPaneToggleButtonVisible="False" IsBackButtonVisible="Collapsed" OpenPaneLength="200" IsSettingsVisible="False" Height="923">
<NavigationView.PaneHeader>
<Image x:Name="Header" Source="/Assets/Header.png" Stretch="UniformToFill" Margin="0,0,0,0" HorizontalAlignment="Left" Width="216" Height="53"/>
</NavigationView.PaneHeader>
<NavigationView/>
Based on this thread, it mentions
This issue was addressed in #1083, which has now been successfully
released as Microsoft.UI.Xaml v2.2.190731001-prerelease.
This means the bug has solved in the Windows UI Library version of NavigationView, so if you want to show your PaneHeader, you need to install the Microsoft.UI.Xaml nuget package and then add <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/> to your Application.Resources.
.App.xaml:
<Application>
<Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
</Application>
.MainPage.xaml:
<Page
......
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
>
<Grid>
<muxc:NavigationView PaneDisplayMode="Left" IsPaneToggleButtonVisible="False" IsBackButtonVisible="Collapsed" OpenPaneLength="200" IsSettingsVisible="False" Height="923">
<muxc:NavigationView.PaneHeader>
<Image x:Name="Header" Source="Assets/StoreLogo.png" Stretch="UniformToFill" Margin="0,0,0,0" HorizontalAlignment="Left" Width="53" Height="53"/>
</muxc:NavigationView.PaneHeader>
</muxc:NavigationView>
</Grid>
</Page>

Phone and Tablet View for Xamarin.Forms

i'm triying to make a xaml that can be different in phone and tablet. I have something like this:
<OnIdiom x:TypeArguments="View">
<OnIdiom.Phone>
<ContentView VerticalOptions="CenterAndExpand">
...
<LineEntry x:Name="User" Style="{StaticResource Style1}"/>
...
</ContentView>
</OnIdiom.Phone>
<OnIdiom.Tablet>
<ContentView VerticalOptions="End">
...
<LineEntry x:Name="User" Style="{StaticResource Style2}"/>
...
</ContentView>
</OnIdiom.Tablet>
</OnIdiom>
But can't use the same id name in the codebehind. How can i do? i don't want to use 2 variables (for example userPhone and userTablet), for each platform. Is another way to accomplish that? thx!
Most properties on an object can be altered using OnIdiom or OnPlatform.
<Image Aspect="AspectFit" x:Name="logoImg">
<Image.HeightRequest>
<OnPlatform Default="400" Android="350" />
</Image.HeightRequest>
<Image.IsVisible>
<OnIdiom Default="True" Phone="False" />
</Image.IsVisible>
</Image>
So in your example (not tested)
<ContentView>
<ContentView.VerticalOptions>
<OnIdiom Default="End" Phone="CenterAndExpand" />
<ContentView.VerticalOptions>
</ContentView>

UWPCommunityToolkit DropShadowPanel on Button

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>

WebView Inside FlipView - Blinking When GotFocus

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>

GridView Control (Windows 8) incorrectly rendered

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