I have a user control in WPF which has a WebBrowser control in it.I can't find a way how to stretch the WebBrowser to fill the size of the whole window.I tried all sort of tricks I found here in SO but nothing helped.Here is my code so far :
<UserControl x:Class="TypeAppRelease.controls.HelpUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Background="Aqua"
VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" Loaded="UserControl_Loaded_1" Margin="0">
<Grid Name="parentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<WebBrowser Name="browser" HorizontalAlignment="Center" VerticalAlignment="Stretch" />
</Grid>
</UserControl>
How can I set main window's width and height to be the dimensions of the child user control and of it's children?
I believe the default behaviour will be for the WebBrowser to fill the UserControl; depending on how you then use your UserControl, it should expand to fill your window, if required.
Adding the Source property to the WebBrowser will give you a better idea of the space it's currently occupying.
This control:
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Background="Aqua" Margin="0">
<Grid Name="parentGrid">
<WebBrowser Name="browser" Source="http://stackoverflow.com" />
</Grid>
</UserControl>
Should expand to fill this window:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:UserControl1 />
</Grid>
I've removed the row and column definitions, as there weren't yet any additional objects other than the WebBrowser, I'm assuming you'll stick some more in, otherwise you could just use the WebBrowser object directly in your Window (if you aren't intending on reusing the control).
N.B. you could remove the Height and Width properties from the Window, and set thiem in the UserControl, if you wanted it to define the size.
Related
I have a custom designed window as shown below.
Custom Window
The following is my XAML design with the styles omitted for simplicity.
<Window x:Class="CustomWindowBase.MainWindow"
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"
xmlns:local="clr-namespace:CustomWindowBase"
mc:Ignorable="d"
Title="CustomWindow" Height="600" Width="870" WindowStartupLocation="CenterScreen"
ResizeMode="NoResize" AllowsTransparency="True" WindowStyle="None" Background="Transparent">
<Border Style="{StaticResource MainWindowBorderStyle}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="590*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Style="{StaticResource TitleBarBorderStyle}">
<Grid>
<TextBlock Style="{StaticResource TitleStyle}" Text="Custom Window"/>
<Button x:Name="BtnClose" Style="{StaticResource CloseButtonStyle}"/>
</Grid>
</Border>
<Grid Grid.Row="1">
<!-- Different User Control Here -->
</Grid>
</Grid>
</Border>
</Window>
There's two events for the code behind of this window that supports the close/drag action.
How can I reuse this shell for every other window that my application will potentially open, sort of like a base class that can be inherited?
If at all possible, I wouldn't want to do much in the code behind, like instantiating an instance of this window shell and assigning it's content with another user control.
Your help is much appreciated.
Put the XAML stuff in a ControlTemplate.
For the <!-- Different User Control Here --> part, insert a <ContentPresenter />. It knows what to do. It just knows.
Apply the template, and the other desired property values, with a Style.
If I got you right, then it's fine. Call it from outside the window with
new MainWindow().ShowDialog();
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Height="833.831" Width="1351">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Unloaded="Unlaoded" Margin="-47,0,0,0" HorizontalAlignment="Right" Width="1398">
<WebView x:Name="WebView" LoadCompleted="WebView_LoadCompleted" Height="814" VerticalAlignment="Top" Margin="-55,10,10,0" Grid.RowSpan="2" HorizontalAlignment="Right" Width="1396" RenderTransformOrigin="0.506,0.695"
/>
<ProgressRing x:Name="ProgressRing1"
Margin="642.019,405,671.173,378.647"
Height="50.353" Width="84.808"
Foreground="BlueViolet"
UseLayoutRounding="False" d:LayoutRounding="Auto"
>
<ProgressRing.RenderTransform>
<CompositeTransform Rotation="1.006"/>
</ProgressRing.RenderTransform>
</ProgressRing>
</Grid>
</Page>
hello all i am new to this forum and also i am new in uwp programming. I am in a desperate position and i need some help. I can't make the above webview responsive in all platforms(desktop,windows phone). I load webview from the code from local app and i can't make it adaptive in all platforms. Can anyone help me make it work from xaml.
Did i need to put
<RelativePanel .../>
in xaml code.
You should not use fixed values for Width and Height. Take a look at the following links:
Arranging UI Elements and
Layout with Absolute and Dynamic Positioning
to have an idea of how positioning works in XAML.
I think you created the UI using the designer, that's why you got those values.
Following is a simple example where the web view is filling all the space from the page:
XAML
<Page
x:Class="Stack1.MainPage"
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">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<WebView
x:Name="WebView"
LoadCompleted="WebView_LoadCompleted"
Source="https://www.google.com"/>
<ProgressRing x:Name="ProgressRing"
Foreground="BlueViolet"
IsActive="True"
Width="100"
Height="100"
>
</ProgressRing>
</Grid>
C# code behind
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void WebView_LoadCompleted(object sender, NavigationEventArgs e)
{
ProgressRing.Visibility = Visibility.Collapsed;
}
}
The ProgressRing will be visible until the web-view content will be loaded (use of LoadCompleted event)
Related to Adaptive UI you can take a look at this video.
If your embedded website URL source is responsive, below code changes will help to you fit your website for all screen sizes. Auto layout size and alignment will help you to fit all screen sizes.
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Unloaded="Unlaoded">
<WebView x:Name="WebView" LoadCompleted="WebView_LoadCompleted" />
<ProgressRing x:Name="ProgressRing1"
Height="50.353" Width="84.808"
Foreground="BlueViolet"
UseLayoutRounding="False" d:LayoutRounding="Auto" />
</Grid>
</Page>
I'm developing an WPF (C#) application using MVVM. I've created a new project which is a simplification that focuses only on the problem I have.
In the View there is a Panel which is composed by a PanelButton which consists on two buttons and PanelDisplay.
The idea is that when orange button is pressed the PanelDisplay should change its color to orange and when green button is pressed PanelDisplay should change to green.
Code for Panel:
<UserControl x:Class="WpfApplication1.View.Panel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:view="clr-namespace:WpfApplication1.View"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.7*"/>
</Grid.ColumnDefinitions>
<view:PanelButtons Grid.Column="0"></view:PanelButtons>
<view:PanelDisplay Grid.Column="1"></view:PanelDisplay>
</Grid>
</UserControl>
The code for PanelButtons.xaml:
<UserControl x:Class="WpfApplication1.View.PanelButtons"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewModel="clr-namespace:WpfApplication1.ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<viewModel:PanelButtonsAndDisplayVM x:Key="panelButtonsAndDisplayVM"/>
</UserControl.Resources>
<Grid Background="LightGray">
<StackPanel>
<Button Width="64" Height="64"
Command="{Binding Source={StaticResource panelButtonsAndDisplayVM}, Path=PressedOrange}">Orange</Button>
<Button Width="64" Height="64"
Command="{Binding Source={StaticResource panelButtonsAndDisplayVM}, Path=PressedGreen}">Green</Button>
</StackPanel>
</Grid>
The code for PanelDisplay.xaml:
<UserControl x:Class="WpfApplication1.View.PanelDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewModel="clr-namespace:WpfApplication1.ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<viewModel:PanelButtonsAndDisplayVM x:Key="panelButtonsAndDisplayVM"/>
</UserControl.Resources>
<Grid Background="{Binding Source={StaticResource panelButtonsAndDisplayVM},Path=Color}" >
</Grid>
The problem is that PanelDisplay does not change its color, to solve this I made a singleton class that launched an event and subscribed PanelDisplay to that event and it worked, but I need two "Panels" in the MainWindow, so if I use this solution the two panels will change their color because they'll both get the same event and only one PanelDisplay should be updated.
Code for the MainWindow:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:view="clr-namespace:WpfApplication1.View"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<view:Panel Grid.Row="0"/>
<view:Panel Grid.Row="1"/>
</Grid>
So, how can be actualized each PanelDisplay separately? Any ideas?
Your PanelButtons.xaml and PanelDisplay.xaml do not use the same instance of PanelButtonsAndDisplayVM class because each is declaring their own instance in resources.
Instead, declare PanelButtonsAndDisplayVM instance in Panel.xaml as DataContext so it is propagated to all descendant controls:
<UserControl x:Class="WpfApplication1.View.Panel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:view="clr-namespace:WpfApplication1.View"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600">
<UserControl.DataContext>
<view:PanelButtonsAndDisplayVM/>
</UserControl.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.7*"/>
</Grid.ColumnDefinitions>
<view:PanelButtons Grid.Column="0"></view:PanelButtons>
<view:PanelDisplay Grid.Column="1"></view:PanelDisplay>
</Grid>
</UserControl>
And use it in PanelButtons.xaml like this:
<UserControl x:Class="WpfApplication1.View.PanelButtons"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewModel="clr-namespace:WpfApplication1.ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Background="LightGray">
<StackPanel>
<Button Width="64" Height="64"
Command="{Binding PressedOrange}">Orange</Button>
<Button Width="64" Height="64"
Command="{Binding PressedGreen}">Green</Button>
</StackPanel>
</Grid>
</UserControl>
And in PanelDisplay.xaml like this:
<UserControl x:Class="WpfApplication1.View.PanelDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewModel="clr-namespace:WpfApplication1.ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Background="{Binding Path=Color}">
</Grid>
</UserControl>
You should create a separate viewmodel for each UserControl. For example you could have a PanelViewModel then as properties on that a PanelDisplayViewModel and a PanelButtonsViewModel.
A button is pressed on the PanelButtonsViewModel.
That method makes a call up to PanelViewModel to report the event.
The panel then updates the display by calling a method on the PanelDisplayViewModel.
Avoid the static resources for view models here and just use the standard DataContext on each user control and it should work out.
I have created a simple WPF application with following XAML code:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" SizeToContent="WidthAndHeight">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button MinWidth="200" MinHeight="40" Content="Hello 1"/>
<Button MinWidth="200" MinHeight="40" Content="Hello 2" Grid.Column="1"/>
</Grid>
</Window>
If I start the application I can resize the windows to a smaller size than the two buttons.
As you can see I have used the MinWidth and MinHeight properties, but they didn't work.
Please help me in this case.
Regards,
Thomas
You probably already solved your problem but I'll leave a simple solution for anyone who is still new to WPF (like me).
Inside the <Window> tag, add an event handler to the ContentRendered event:
<Window x:Class="MyTest.MyForm"
...
...
SizeToContent="WidthAndHeight"
ContentRendered="Window_ContentRendered">`
Then add the code-behind:
private void Window_ContentRendered(object sender, EventArgs e)
{
MinWidth = ActualWidth;
MinHeight = ActualHeight;
}
This way, the window will calculate its size first (based on SizeToContent="WidthAndHeight"), then you set the minimum values after it renders its content, thus preventing the user from resizing it to be smaller than the content.
You might want to add MinHeight and MinWidth to the WINDOW level to never go smaller than the smallest elements you are expecting WITHIN its content...
Title="MainWindow" Height="350" Width="525" MinHeight="90" MinWidth="410" SizeToContent="WidthAndHeight"
two buttons high of 40 (80) Plus some arbitrary gap (10) = min height of 90... Likewise for the width. Two buttons minimum width of 200 = 400 total plus arbitrary gap (10) = 410.
I have a WPF Application and when I change my screen resolution to 800 X 600 or other smaller resolutions then, I can not see all my form. I see just up side of my form. How may I overcome this?
<local:WorkControl x:Class="Mzaddress.AddressControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:Mzaddress"
Title="Adresse" mc:Ignorable="d" d:DesignWidth="840"
xmlns:r="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
Loaded="WorkControl_Loaded" x:Name="myCntl"
FontFamily="Arial" FontSize="12" xmlns:my="clr-namespace:Mzaddress.UserControls"
VerticalAlignment="Top" VerticalContentAlignment="Stretch"
local:HelpProvider.HelpParameter="AddressControl">
<local:WorkControl.Resources>
Try this little sample und put your form into such simple ScrollViewer.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid Height="600" Width="800" Background="Green"/>
</ScrollViewer>