I'm using Viewbox controls to proportionally size content in my app at a certain display size. I don't know what the display size of the target computer will be, but I need the app's layout, fonts, graphics, etc to look the same on the target computer as on my machine. Viewbox has worked great for me in the past to accomplish this.
However, when I include a MediaElement (to play a WMV) inside the Viewbox, the media's audio and video get out of sync. The video lags behind, then speeds up, then lags behind, then speeds up, etc.
My actual layout looks something like this:
<Grid>
<Viewbox>
<Grid Width="888" Height="500"> <!-- 16:9 screen size -->
<!-- row definitions -->
<Viewbox Grid.Row="1">
<Grid>
<custom:TransitionFrame />
<!-- TransitionFrame inherits from Frame -->
<!-- TransitionFrame holds a Page that
looks like this:
<Grid>
<MediaElement />
</Grid>
-->
</Grid>
</Viewbox>
</Grid>
</Viewbox>
</Grid>
Any ideas on why this would impact the video? Any ideas on how to resolve it?
Ugh. This has caused me sooooooo much issues. Its really depends on the machine. I have a pretty solid development machine and have never seen any issues. Then I ran the application on another normal machine and it was choppy as hell. I had to play with the following settings:
Switching monitors
Switching screen refresh rates
Switching resolution
Switching graphic cards.
Then when I got the out-of sync issues to < 500ms I created another layout and put in an option saying low graphics and it played fine. I made the other layout very basic with no more than one ViewBox.
I recommend staying away from Viewboxes with MediaElements
Related
I can write well. But WPF Inkcanvas can not be seen after saving in tablet.
but if i use another computer (not tablet), can write and see well.
Your question is not clear. Based on my understanding, I hope that is because the size of the tablet screen which is smaller than the desktop that makes the strokes to get hidden inside the area that was not visible on the tablet, However, the area is visible in Desktop.
Have the InkCanvas inside the Viewbox. I hope that will fix your issue.
<Grid>
<Viewbox Stretch="Fill">
<InkCanvas />
</Viewbox>
</Grid>
I have a wpf application that constantly produces odd straight lines (grey) across the screen.
As the mouse moves around they appear and disappear.
Sorry for the bad description but its hard to describe.
I wonder if there is anything I can do about it.
I have tried a few rendering options and so forth.
<dxg:GridControl SnapsToDevicePixels="True"
and
RenderOptions.ClearTypeHint="Enabled"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased"
We have similar issues with big black vertical bars. Only resolved by switching to software only rendering:
System.Windows.Media.RenderOptions.ProcessRenderMode = RenderMode.SoftwareOnly;
The ContextMenu provided by the Silverlight 4 Toolkit worked great until I implemented a
<RenderTransform> tag in my XAML in order to have the Silverlight app scale to fit the entire browser window (following this little tutorial)
When all worked great, before the tutorial, my XAML looked like:
<UserControl>
<Grid>
<!-- Rest of app here... -->
</Grid>
</UserControl>
Now, my app looks like:
<UserControl>
<Canvas>
<Canvas.RenderTransform>
<ScaleTransform [vars]></ScaleTransform>
</Canvas.RenderTransform>
<Grid>
<!-- Rest of app here... -->
</Grid>
</Canvas>
</UserControl>
The scaling works perfectly, but now when I right click, the ContextMenu doesn't appear where it should (under the mouse). Instead, it appears at the same x-position as the mouse, but it shows up at the very top of the app. It's also very buggy, I have to keep clicking around to get it to go away, and I can't right click somewhere else to bring it up again, and it doesn't scale along with the rest of the app.
What might be causing this? Is there a correct way to go about fixing this, or should I just apply an offset to the menu to move it to the mouse?
You will need to pass the cursor coordinates through the inverse of your scale transformation to convert the screen point to a point your application understands.
I can't seem work out (even though I have seen other apps) how to set the whole background of a WP7 page to a image or colour, like in Panorama for example.
If i set
Grid x:Name="LayoutRoot" Background="#FF0079C1"
Or
<Grid.Background>
<ImageBrush ImageSource="/images/highwaysBack.jpg" Stretch="None" />
</Grid.Background>
it still leaves the top info section either black or white depending on the phone setting.
Many thanks.
That's most likely the System Tray. You can hide that by setting shell:SystemTray.IsVisible="False" on your page.
Make a note that hiding the system tray isn't something you always want to do, as you're hiding info like the battery life. Only do it because you app absolutely has to, like a video game. If it's just a simpler app there shouldn't be a real neeed to hide it.
It is idiomatic in Windows Phone 7 to display a loading indicator at the very top of the screen. (I don't think there is any padding between the loading indicator and the top.)
What is the best way to do that in Silverlight? This XAML works, sorta:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- this needs to be at the very top of the screen -->
<ProgressBar x:Name="LoadingProgressBar" IsIndeterminate="True" Style="{StaticResource PerformanceProgressBar}" Grid.Row="0"/>
<controls:Pivot Title="SECTIONS" x:Name="pivotControl" SelectionChanged="pivotControl_SelectionChanged" Grid.Row="1" />
</Grid>
It places the ProgressBar near the top of the screen, but there's still space. I could just apply a negative margin, but I suspect there's a more elegant way. What is the preferred way of doing this?
Have a look in the definition of the PhoneApplicationPage. Is shell:SystemTray.IsVisible set to True of False?
My guess is that you've got it set to True (the default).
If this is the case then space at the top of the page will be reserved to display the system tray. (Which includes signal strength, battery level indicator, clock, etc.) If you change this to False then the layout engine will use all available space for your controls.
The downside to this is that the user won't be able to access the tray while your app is running.
While it's common to put an inditerminate wait indicator at the top of the screen, it's also not unusual to see it in the middle of the screen. Subject to what you're actually displaying on the page, you could consider this if you want to preserve the ability to see the system tray.
Alternatively you could use a completely custom wait cursor.
Your code works for me. I pasted your code in, replacing your Pivot control for a button.
What are you seeing?
Inbuilt in the windows phone control templates is metro styling. As you say you can use the likes of negative margins (or paddings in controls I've looked at)... iirc, the progressbar has styling such that if the height is not a minimum of 73 pixels then the progressbar is obscured.
Alternatively you can go to the source of this by retemplating the control in blend and controling the properties in the consituent components that make up the control.
To do this, rclick the control in blend, edit template, edit a copy and you're away.