I'm developing a silverlight application for use on small and large monitors,
I had the code working perfectly, my main page contains a viewbox and all controls are children of that viewbox and they did scale correctly, i've been testing on IE9 the whole time.
Recently VS2010 crashed which is does quite frequently when dealing with silverlight, ever since this crash IE9 refuses to display my Viewbox correctly.
Chrome / Opera / Firefox / Safari all have the correct behaviour but not IE9 anymore.
When the application starts, its initial size is correct but after a few seconds it seems to break out of the viewbox.
MainPage.xaml
<Viewbox MinHeight="600" MinWidth="800">
<Grid Width="1024" Height="768" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="25">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<sdk:Frame Grid.Row="0" Style="{StaticResource FrameStyle}" Source="{Binding SelectedPage.PageUri}" NavigationFailed="Frame_NavigationFailed" />
<Border Grid.Row="1" BorderBrush="#FFD4D2D2" Background="White" BorderThickness="1 0 1 1">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
...
</StackPanel>
</Border>
</Grid>
</Viewbox>
the following images show what the page looks like in IE and Chrome.
Chrome at roughly 800x600 (Correct)
IE at roughly 800x600 (Incorrect)
Both are using the same XAP file the app was never run on chrome before so it shouldnt have been cached, either way the cache was cleared before testing.
Has anyone had a problem similar to this before? are there any work arounds to make this work on IE?
Is this a bug with silverlight or IE?
Any help would really be appreciated
Thanks
Have you control-mouse-wheel zoomed the IE display by any chance?
You have specified minimum display sizes on the ViewBox, so you should probably contain that ViewBox in a ScrollViewer in case it does not fit.
Related
<Grid>
<!-- xmlns:webview="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView" -->
<webview:WebView ... />
<Grid x:Name="Overlay"
Panel.ZIndex="1000"
Background="Red"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
I am trying to overlay a WebView with another control (Overlay). But it seems that the WebView is always on top of other controls.
Is there a way to place controls on top of a Microsoft.Toolkit.Wpf.UI.Controls.WebView?
The Webview control is a wrapped UWP control which in turn wraps a win32 component I believe.
Due to airspace problems this control will not support transparency and will always be rendered on top. See here for a better description:
https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/technology-regions-overview
Although it is possible to run it in a popup as a workaround, it might not be very futureproof:
"WebView controls can be hosted in a popup window. We recommend that you do not do this because support for that scenario will soon be disabled for security reasons."
See here for more
CefSharp might be a better solution. It it based on Chromium and there is a Nuget package available. In the example below a red grid is rendered over the browser:
<Grid>
<cefSharp:ChromiumWebBrowser Address="https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions" />
<Grid x:Name="Overlay"
Height="100"
Background="Red"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
Output:
I implemented the printer functionnality detailed on this page and I think I stumbled upon a bug in the printing behavior of System.Windows.Printing. I just added an Image in the layout, like this:
<Grid x:Name="documentRoot">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="25"/>
<RowDefinition />
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image x:Name="logo" Source="/MyProject;component/Image/logo.jpg" Grid.Row="0" Width="265" Height="51" HorizontalAlignment="Left" Margin="0,0,0,15" VerticalAlignment="Bottom" />
<TextBlock x:Name="headerTextBlock" Grid.Row="1" HorizontalAlignment="Center" />
<TextBlock x:Name="bodyTextBlock" Grid.Row="2" TextWrapping="Wrap" />
<TextBlock x:Name="footerTextBlock" HorizontalAlignment="Center" Grid.Row="3"/>
</Grid>
What happens with this code is that whenever multiple pages have to be printed for the first time since the application has started, it will skip the first 2 pages and only print the rest of the pages. If you try to print the same thing again it will print the pages nicely as expected, and forever until you restart the application.
Please note that it has nothing to do with the added RowDefinition, as I tried to just remove the Image element and it worked perfectly fine. It is only when I put the Image element in my UserControl that the printer starts going bonkers.
So I am assuming this is yet another "minor" bug that Microsoft won't ever bother to fix in years, such as this one or some other non-working flags in Powershell that I have had to struggle with in my early days.
This being said, I would be more than happy to be told wrong on this issue. But if I'm not, does anyone have any idea on a workaround?
Found a workaround to my problem: converting the image file into a XAML Canvas using this website, and then copy-pasting the whole Canvas code instead of the Image in my PrintPage.xaml file seems to do the trick. Even though it's quite horrible. I know.
I have a question about WPF's ScrollViewer
This is the code I currently have:
<Window x:Class="BasketNovelEditor.Menu.AboutBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStartupLocation="CenterOwner"
Title="AboutBox" Height="Auto" Width="425" Focusable="True" SizeToContent="Height">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="200"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" MinHeight="50" VerticalContentAlignment="Center" HorizontalContentAlignment="Center">Thank you!</Label>
<Label Grid.Row="1" MinHeight="30" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">BasketNovel uses the following Libraries:</Label>
<Button Grid.Row="3" DockPanel.Dock="Bottom" IsDefault="True" IsCancel="True">Close Window</Button>
<ScrollViewer Grid.Row="2" Margin="5" Height="200">
<StackPanel>
</StackPanel>
</ScrollViewer>
</Grid>
And these are the results I'm getting:
http://i1280.photobucket.com/albums/a500/daegon123/ss.png
http://i1280.photobucket.com/albums/a500/daegon123/ss_zps3d6b8c90.png
I have absolutely no idea why my scrollbar is showing up like this.
I was at least expecting the up/down arrows to be placed at the start/end points
of the scrollbar.
Anyone have a clue as to why this is happening?
I'm not sure if this has anything to do with it, but the Window is
being used as a dialog box called as follows:
aboutbox.ShowDialog();
I'm currently using .NET 4.0
--EDIT2--
After a bit of testing, I realised that this would happen in all my modal windows
if I placed scrollviewers in them. The scrollviewer in my main window looks fine,
so I'm getting the feeling this is something modal window specific, or something
I may be doing to them without knowing. Anyone have any ideas?
Have you tried moving the Height="200" to the StackPanel instead?
This for some reason has been resolved after an update to Visual Studio 2012 update2.
I'm still using .NET 4.0
Encountered with the same problem in 2019, with VS2019 Community. ScrollViewer worked just fine in Main Window, but in Modal Window it doesn't scroll at all.
I set Height to the ScrollViewer and to the StackPanel, and it start worked fine.
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" PanningMode="Both" Height="340">
Also I played with different versions of .NET Framework
I am about to start developing an application in windows phone 7. But I have a doubt in some points.
This is the GUI format of the application. The application have many pages.
In first section there are 3 buttons and no change for their design in entire application. In iPhone I used the UINavigationBar control. But is there any control in windows phone like UINavigationBar in iPhone ?
In second section the content is always changing.
In third section there are some buttons. But the buttons functionality is different in different pages. And also need to remove or add extra buttons in some pages. In iPhone I used UITabBar control.
Which way I can start the app development efficiently ?. Can anyone please suggest controls or idea I can use here in windows phone for this purpose ?
Thanks.
It seems you're trying to build a Windows PHone app the way you would an iPhone app. This typically leads to a very poor experience on Windows Phone and leads to users becoing frustrated as the app doesn't behave in the same way as other apps on the platform (and therefore the way they expect your app to behave).
I'd recommend starting by looking at some Design Resources for Windows Phone before designing your app so you can build something appropriate to the platform.
A couple of pointers:
- In general, floating buttons on [the top of] a page look bad. This is not the way apps on the platform perform navigation (unlike iOS). Windows Phone apps should use a "hub and spoke" model for page navigation.
- Having contents cahnge within a page is likely to lead to some confusion about the expected behaviour of the back button. Be very careful about this as inconsistent, unpredictable or non-standard back button behaviour can cause an application to fail certification.
If you don't want to create an application where the user can navigate from page to page (and use the back button to go back) you can create an application based on a single page. Here is a somewhat modified version of what Visual Studio creates for you if you create a Windows Phone Application project.
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="728"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Margin="12,17,0,28">
<TextBlock
Text="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock
Text="page name"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- The three buttons -->
<StackPanel Orientation="Horizontal">
<Button Content="Button 1"/>
<Button Content="Button 2"/>
<Button Content="Button 3"/>
</StackPanel>
<!-- The main content -->
<TextBlock Grid.Row="1"
Text="Content always changing"
Style="{StaticResource PhoneTextTitle1Style}"
TextWrapping="Wrap"
TextAlignment="Center"/>
</Grid>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton
IconUri="/Images/appbar_button1.png"
Text="Button 1"/>
<shell:ApplicationBarIconButton
IconUri="/Images/appbar_button2.png"
Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
And here is how it looks in the designer:
In this case the main content (that is always changing) is a <TextBlock> but you can use a panel composed of other controls or a UserControl. If you put multiple panels/controls in the same grid cell you can completely change the layout by hiding all but one panel/control.
For the top row of buttons I have used a horizontal <StackPanel> but you may want to use something else for better control of the layout and alignment.
For the bottom row of buttons you should use the appbar which is part of the standard Windows Phone 7 user experience.
How abt a Pivot? It might suit your needs. Techinically pivot is used to show the same data in different ways.
MSDN
I have a simple WPF Popup that I am showing when the user clicks a Button.
<Button
x:Name="aButton"
Content="Up/Down"
Width="75"
Height="30"
Click="aButton_Click"
/>
<Popup
PlacementTarget="{Binding ElementName=aButton}"
Placement="Right"
VerticalOffset="-31"
StaysOpen="False"
AllowsTransparency="True"
>
<StackPanel>
<Button Width="45" Height="45" Margin="2,0,2,2" Content="+"/>
<Button Width="45" Height="45" Margin="2,0,2,0" Content="-"/>
</StackPanel>
</Popup>
What is extremely weird ... is that this code works differently depending on what machine it runs on.
I run this code on my main desktop and everything works just fine ... and as it should. I run it on my PDC09 netbook ... and the Popup shows opposite (on the left instead of the right as I told it to with the Placement property).
Why is this? And what can I do about it?
I couldn't find anything via Google ... but a lucky search in the WPF forum, quickly found this post. Note to self: don't forget to search the WPF forums if Google can't find anything.
The answer is that my PDC09 netbook is a Tablet PC at heart, and apparently, Microsoft thought it was a good idea to show the Popup opposite to the Placement property on a Tablet PC that is configured for right-handed people ... such that the Popup doesn't appear under the user's hand.
The solution is to revert to custom Popup placement ... if you don't want this behavior.
I would love to hear about any other ways around this problem.
I fixed this issue by adding a border in the same grid col/row as the desired placement target. Then set this as the placement target instead. By binding the width of this border to the popup content it will adjust it's width automatically therefore the alignment (left or right) is irrelevant. If you want to still control alignment, you can do that by aligning the placement target border.
Hope that makes sense, if not, here is a quick example.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Popup x:Name="StartMenuPopup" Placement="Top" PlacementTarget="{Binding ElementName=PopupTarget}" >
<Border x:Name="PopupBorder">
</Border>
</Popup>
<Border x:Name="PopupTarget" Grid.Row="1" Width="{Binding ActualWidth, Mode=OneWay, ElementName=PopupBorder}"
BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<startmenu:TaskBar Grid.Row="1">
<startmenu:TaskBar.StartButton>
<startmenu:ToggleMenu Width="36" x:Name="StartButton"
ImageData="{Binding StartButtonImageData}"
AssociatedPopup="{Binding ElementName=StartMenuPopup}"
IsOpen="{Binding StartMenuOpen, Mode=TwoWay}"/>
</startmenu:TaskBar.StartButton>
</startmenu:TaskBar>
</Grid>
The popup PlacementTarget binds to the PopupTarget border, and the PopupTarget border width binds back to the PopupBorder element. This makes the PopupTarget border the same width as the popup therefore negating the alignment issue.