I'm using the the wpf-mediakit library to render a video stream from a usb camera for my desktop application.
Tha XAML:
<TabItem>
<Grid>
<controls:MediaUriElement x:Name="mediaUriElement" Grid.Row="1"
DeeperColor="False"
Margin="4"
Stretch="Uniform"/>
<controls:VideoCaptureElement x:Name="cameraCaptureElement" Grid.Row="1"
EnableSampleGrabbing="False"
DeeperColor="False"
Margin="4"
Stretch="Uniform"/>
</Grid>
</TabItem>
And the code-behind:
public MainWindow()
{
InitializeComponent();
cameraCaptureElement.VideoCaptureDevice = MultimediaUtil.VideoInputDevices[0];
}
The problem is, when I switch tabs and return to this tab item, the stream does not render at all. As far as I could tell, this is some Tab Virtualization problem, but I was out of ideas on how to solve this. Also, ideally, I would not want to re-initialize the stream every time as it takes a couple of seconds to do so.
Related
I am building a UWP app which gets content from the internet, as I am pulling images it often takes some time to load. I would like to have a loading screen when a user navigates to one of these pages that has an image.
I have attempted to use a progress ring which is visible while the content is being loaded and collapses when content has loaded, however this has been unsuccessful.
What would be the best way to do this.
Thanks in advance.
You can create a placeholder (image with text "image is loading").
If you have a ListView or some other data control you can use attribute Phase for this purpose:
<ListView ItemsSource="{x:Bind myimages}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:ImageInfo">
<StackPanel Orientation="Vertical">
<Grid>
<Image Source="Assets/placeHolderImage.jpg" x:Phase="0" />
<Image Source="{x:Bind Url}" x:Phase="3" />
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
As you can seein this template one image is placed over another. First is loading image with Phase="0" and when another one with Phase="3" is loaded it's placed over
Hi i am Developing a app on universal windows 10 app platform, and when i put some Objects on the XAML window and when change the screen size it's stay how it was before so it's fit the new screen size and if i fix it it's fit the old screen size and i need the app to be universal.
my xaml code:
<Page
x:Class="App17.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App17"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Loaded="Grid_Loaded">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/backPHONE.jpg"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="55*"/>
<RowDefinition Height="9*"/>
</Grid.RowDefinitions>
<RelativePanel>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="41,155,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="128" Width="360" Text="test 123" FontFamily="Century Gothic" FontStretch="UltraExpanded" FontStyle="Italic" FontSize="26" Tapped="textBlock_Tapped" TextAlignment="Center"/>
<ComboBox x:Name="comboBox" HorizontalAlignment="Left" Margin="84,700,0,-666.8" VerticalAlignment="Top" Width="264" SelectionChanged="comboBox_SelectionChanged" Height="32" Grid.Row="1">
<ComboBoxItem Content="test" IsSelected="True"/>
</ComboBox>
<TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="164,675,-2.8,-665" TextWrapping="Wrap" Text="test" VerticalAlignment="Top" Height="20" Width="120" Grid.Row="1" SelectionHighlightColor="#FFF10000" FontFamily="Century Gothic" FontSize="12" FontStretch="UltraExpanded" FontStyle="Italic" Foreground="White"/>
</RelativePanel>
</Grid>
thanks
Let me introduce two possible ways to handle various screen sizes related with Universal Windows 10 Apps.
1. Adaptive Triggers - you can use them to adjut your layout to different device families - for instance you can define how your Page will look on the smartphone and while app is launched on the PC. Below I tried to add some short instructions how you can start using them.
a) When you have Visual Studio opened, please right click on the MainPage.xaml and select "Design in Blend...":
b) Go to "States" tab and select icon (marked red rectangle below) called "Add state group":
c) Now you have to add state, so click the icon next to "Visual State Group" as show below:
d) Now add two state: "Mobile" and "Desktop" as shown below:
e) Last step is to set minimum window width to detect when screen size is changed:
f) Now you are able to set minimum window width for the "Mobile" state:
Please type 320 as below (remember that these are effective pixels not physical)
Once you click "OK" Visual State for "Mobile" will be configured.
Do the same above steps but for "Desktop" state and type 1024 for minimum window width:
Now I can switch between two states and adjust the design for each of them:
(Note that currently selected state is marked with red rectange):
1. Device-Family Folders - you can specify two separate views for Pages but with one code behind. This can help if you have to craft your design specially for mobile devices and for instance fot the PCs.
a) Right click on the project and add new falder called "DeviveFamily-Mobile":
b) Add new Xaml View called the same like your previous page - in my case this is "MainPage":
c) Now you have one code behind class but two separate views that will be applied accordingly to device family:
I hope that it will help you to start.
You can also watch very good Channel9 video or visit my blog where I am trying to present a lot of helpful samples related with UWP.
you must use AdaptiveTriggers
http://www.wintellect.com/devcenter/jprosise/using-adaptivetrigger-to-build-adaptive-uis-in-windows-10
I can't seem to solve issue with horrible UI freeze when assigning DataContext to Listbox control in WPF.
I have DataTemplate defined in Window.Resources.
When app starts I load and sort images in List, where ImageInfo holds various information about image that is loaded, including URI path or BitmapImage.
Problem does not lie here however, when I assign this List as DataContext of ListBox control, I get really huge freeze that I can't seem to be able to solve.
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="260" Height="360">
<Border Padding="5" Margin="10" BorderBrush="Orange">
<Image Source="{Binding image}" Stretch="Fill" HorizontalAlignment="Center"/>
</Border>
<Border Background="Black" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Opacity="0.70" Height="50" Margin="0,10,10,0"></Border>
<StackPanel VerticalAlignment="Bottom" Orientation="Horizontal" HorizontalAlignment="Center">
<!-- 3 buttons -->
</StackPanel>
</Grid>
</DataTemplate>
<ItemsPanelTemplate>
<UniformGrid Columns="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
I assign DataContext like so :
lbGallery.DataContext = lst169;
Lists contain more than 10 items.
So far I tried to solve issue by :
Trying some virtualization options on grid
Skipping loading image as BitmapImage, and instead using just URI from path
Using fixed size for grid
I'm sure that problem is not related to code regarding loading files in lst169, because it loads data only once on startup. Using URI instead of BitmapImage assured me that my method for getting image is not problem as well.
It all leads back to setting that DataContext to listbox control.
What is the proper way to do this ?
Thanks!
EDIT :
To clarify since my post is confusing many users :
Application starts
Resource data is loaded into List (3 lists with different images)
Once data is fully loaded, I set one fully loaded list as DataContext of ListBox
That is when freeze happens.
Later on user can switch between images by click on a button. I switch DataContext during this time as well. Freeze happens.
So - Freeze is not caused by loading resources on startup. It's caused by setting DataContext of Listbox to a List, when image gets binded to Image control. Regardless if I'm binding BitmapImage type, or URI with absolute path.
Have your tried setting the Image-Binding to IsAsync = true
<Image Source="{Binding image, IsAsync=True}" Stretch="Fill" HorizontalAlignment="Center"/>
I'm in need of making a rectangle clickable, at which it will run a function that animates it and does some stuff. I've tried to browse Microsoft's API, but I don't find anything and I'm going crazy because of this. This will be the last time I touch XAML, but I really need to know how to get this to work.
<Grid Background=Transparent>
<Grid same same>
<Rectangle MouseLeftButtonDown="moveClick" x:Name="red"
Fill="Red" Height="125" Width="125" Stroke="Pink"
StrokeThickness="10" Margin="106,196,225,348"
/>
</Grid>
</Grid>
This is one of my rectangles and I have a function called moveClick in the .xaml.cs file that should be called. In that function there is some code firing up an animation that will target this rectangles. Since I have a lot of rectangles I want to animate I am changing the target depending on which one is pressed. Problem is, the MouseEvent isn't happening. I have googled for hours but Microsoft's help is useless. I don't know what to do.
I can't really post more code than this because then I'd have to rewrite it all over due to my PC I'm programming on has no internet connection. THis is my laptop and I'm going through my phone because my normal internet is down. My desktop has no wifi.
SO, can anybody who has had experience with Windows apps tell me what the reason could be? Is it because I'm in a grid? I saw somewhere that it has to have a transparent background. It is. I'm so clueless because there's nothing to go on because wherever I look, I find something irrelevant or dead ends.
EDIT: Just to clarify, the animation works. I temporarily set it to run by pressing a button used for something else. And it works. It just doesn't work when touching the Rectangles.
EDIT TWO: I'm just using the template, and just added stuff under the ContentPanel as they call it.
An alternative/lazy approach is this:
<Button Click="moveClick" BorderThickness="0" Background="Transparent">
<Rectangle x:Name="red"
Fill="Red" Height="125" Width="125" Stroke="Pink"
StrokeThickness="10" Margin="94,184,213,336"
/>
<Button>
In the click handler you can get the inner rectangle with the recursive function grabbed from this question: How to get children of a WPF container by type?
public static T GetChildOfType<T>(this DependencyObject depObj) where T : DependencyObject
{
if (depObj == null) return null;
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
var child = VisualTreeHelper.GetChild(depObj, i);
var result = (child as T) ?? GetChildOfType<T>(child);
if (result != null) return result;
}
return null;
}
The rectangle it self works fine here. MouseLeftButtonDown get invoked. It is more likely that the way you place it that matter. Can't guess without looking more XAML code.
Wild guess for workarounds, try with Tap event too and explicitly set IsHitTestVisible="True" :
......
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<Rectangle MouseLeftButtonDown="moveClick" x:Name="red"
Fill="Red" Height="125" Width="125" Stroke="Pink"
StrokeThickness="10" Margin="106,196,225,348"
Tap="red_Tap" IsHitTestVisible="True"
/>
</StackPanel>
</Grid>
......
Both event get invoked when I tap the rectangle with this setting. And when IsHitTestVisible set to false, both event doesn't get invoked, just as I expect.
I have a situation here. I have a page containing a ListBox. The ListBox is populated with Items if it is able to fetch the data from a web service. Now when the user doesn't have network connectivity on his phone or the webservice doesn't respond back with Ok status, I want to show the user a pop-up with an option to Retry or select Ok to stay on the same page (though it sounds dumb). Now for this I used a Canvas:
<Canvas Name="Nonetwork" Height="150" Width="280" HorizontalAlignment="Center" VerticalAlignment="Center" Background="DodgerBlue" Visibility="Collapsed" Margin="111,160,92,160" >
<TextBlock VerticalAlignment="Top" Height="120" Width="280" Text="No Network is currently availabe" TextAlignment="Center" TextWrapping="Wrap" Foreground="White" FontSize="28" />
<Button Margin="30, 80" Height="60" Width="100" Content="OK" FontSize="18" Click="Ok_Click"/>
<Button Margin="150, 80" Height="60" Width="100" Content="Retry" FontSize="18" Click="Retry_Click"/>
</Canvas>
Well as most of you experienced guys would have guessed, the canvas is buried inside the listbox and is not accessible when there is no network connectivity. So I have a blank page with the canvas but the user is not able to click on Ok or Retry. Please help
Please do let me know if there is any other approach to solve this problem. I tried Popup but I cant Navigate to the main page from a pop-up since that is a user control page. Any help is higly appreciated
Well, I placed my Canvas below the ListBox and the problem was solved. I didn't know that positioning of the controls in the XAML would have so much effect ...
The order in which elements are rendered in Silverlight is determined firstly by where they appear in the visual object hierarchy and secondly by their ZIndex property.
The Canvas has a third attached property named ZIndex that you can use to override the default layering of elements. Although this Canvas.ZIndex attached property is defined by the Canvas class, it actually works with any type of panel.
You can also try Canvas.ZIndex property:
Canvas.ZIndex Attached Property
What you do is a wrong practice and not at all recommended.
ChildWindow is the class you should use to display such kind of dialog.
Using a Popup is also another approach you can use.
NOTE: I know the simplest approach would be to use MessageBox.Show(), but it would create a popup out of silverlight frame and does not allow theming/styling and other customizations.