Develop Reference

Overlay over WebBrowser control

I have a TabControl (using InfragisticTabControl) where each TabItem contains a WebBrowser control where I can display a URL like www.google.com or any xbap UI.
Below is the TabItem Code:
<Grid>
<WebBrowser x:Name="myBrowser"
webHelper:WebBrowserHelper.BrowserSource="{Binding XBAP_URI}"
Height="Auto"/>
<Grid Name="MyOverlayGrid" Background="LightGray" Opacity="0.5"
Visibility="{Binding Path=IsEnabled, Converter={StaticResource BoolToVisible2}, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type igDock:ContentPane}}}">
<TextBlock Text="User does not have permissions for this application" FontSize="24"/>
</Grid>
</Grid>
I verified using snoop that Visibility binding is correctly getting populated, but I don't see MyOverlayGrid on myBrowser control. I even tried updating Panel.ZIndex for MyOverlayGrid, no help.
Only thing that worked is to set myBrowser visibility to hidden (i used snoop) and then i could see MyOverlayGrid.
Can anyone tell me if I am doing something incorrect or missing something obvious? This works fine for a contentcontrol, may be its not possible for a WebBrowser control since the its starts new applictaion (InternetExplorer.exe or PresentationHost.exe) in the tab control?
Thanks,
RDV

Can anyone tell me if I am doing something incorrect or missing something obvious?
The latter am I afraid. The WebBrowser control is hosted in a separate HWND that is always drawn on top of the WPF elements as stated in the documentation on MSDN: https://msdn.microsoft.com/en-us/library/ms744952(v=vs.110).aspx.
There is nothing much you can do about this besides applying a workaround like for example putting your Grid in a Popup.
You may want to consider using some other third-party WebBrowser control such as for example Chromium.

Correct way to get uri of image embedded as resource in UWP class library

I have a UserControl in a class library for UWP. The usercontrol is going to be displaying signal level of the GPS.
I am using a BitmapIcon which displays the Signal level and it changes based on a signal level property. I am using a BitmapIcon so that I can change the foreground colour for themes etc.
Anyway, here is the xaml
<BitmapIcon Grid.Column="1" UriSource="{Binding GpsSignalState, Converter={StaticResource SignalImageConverter}}"
Foreground="{Binding Foreground, ElementName=userControl}"/>
It's bound to a property in the ViewModel and uses a converter to convert the signal to the correct image.
Here is the converter code.
public object Convert(object value, Type targetType, object parameter, string language)
{
if(value.GetType() != typeof(SignalStrength))
return null;
var signal = (SignalStrength)value;
switch (signal)
{
case SignalStrength.Excellent:
return new Uri("ms-appx:///Assets/Img/Signal-Bars 4.png");
case SignalStrength.VeryGood:
return new Uri("ms-appx:///Assets/Img/Signal-Bars 3.png");
case SignalStrength.Good:
return new Uri("ms-appx:///Assets/Img/Signal-Bars 2.png");
case SignalStrength.Valid:
return new Uri("ms-appx:///Assets/Img/Signal-Bars 1.png");
case SignalStrength.Bad:
return new Uri("ms-appx:///Assets/Img/Signal-Bars 0.png");
default:
throw new ArgumentOutOfRangeException();
}
}
As you can see the images are located in a folder Called /Assets/Img/
The images are set to build type as Embedded Resource.
I imagine someone may ask this so the assembly name is Hardware.Sensors.GPS
My issue is that the images never show. I get no error and I can put a break point in the converter to that it executes.
I have tried various ways of building a uri such as
Uri("/Assets/Img/Signal-Bars 4.png", UriKind.Relative);
and
Uri("ms-appx:///Assets/Img/Signal-Bars 4.png");
and
Uri("ms-appx:///Hardware.Sensors.GPS,component;/Assets/Img/Signal-Bars 4.png");
but none seem to work.
Any ideas?

Actually I think the problem is not related to Build Action, you can set Build Action to:
I think the problem is with your Images, as you can see from the official document of BitmapIcon class, in the "Remarks" part:
The file that you use should be a solid image on a transparent background.
I replaced your images with some images downloaded from here, it works. This BitmapIcon control will redraw the part filled with solid brush(un-transparent) of the source image with the Foreground color.
So, first method, you can replace your Images.
Sencond I think you can use a Image control like this:
<Image Grid.Column="1" Source="{Binding GpsSignalState, Converter={StaticResource SignalImageConverter}}" />
There is no Foreground property of Image control, but it doesn't mean that you can't set a Foreground cover a Image control, you can for example do it like this:
<Grid Grid.Column="1">
<Image Source="{Binding GpsSignalState, Converter={StaticResource SignalImageConverter}}" />
<Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Opacity="0.4"
Fill="{Binding Foreground, ElementName=userControl}" />
</Grid>
But this method is unlike setting the Foreground property to BitmapIcon, if you insist replacing the transparent background with the Foreground color of the image, you should use BitmapIcon.

Set the Build Action to Content and the Copy to output directory to Do not copy and your existing code should work.

User Control With Image To bind in windows phone

I want to make a user control that contains Image control and I want to bind its source with a url of image. How to do this in the user control XAMl and CS code and how to use this user control and bind its dependency property ?

You could have the Image control like this, which you could bind the source to it:
<Image Width="75" Height="75" Source="{Binding thumbUrl}" Stretch="Fill"/>
For more you could refer these:
Image databinding XAML, Silverlight, C#, Windows Phone 7.1
http://www.geekchamp.com/tips/data-binding-images-in-windows-phone
Hope it helps!

You can create a user control by,
(i)Right click the project tile in Solution Explorer and then select Add->New Item
(ii)Select Windows Phone User Control from the pop up windows, set the name that you want to use
(iii)Add the following code inside the XAML part of the user control
<StackPanel x:Name="LayoutRoot" >
<TextBlock Text="My User Control" FontSize="34"/>
<Image x:Name="Image1" Source="{Binding ImageUrl}" />
</StackPanel>
Define a property in your Model,
public Uri ImageUrl { get; set; }
and bind it to your Image
Uri uri = new Uri("http://Abundantcode.com/image.jpg", UriKind.Absolute)
Image1.Source = new BitmapImage(uri);
Now you can use UserControl anywhere you want,
<local:MyUserControl x:Name="myUserControl" />

Set ImageSource through ViewModel not working

I have a WPF application in which I use several images. Most of the images are set in the XAML-code as they will not change anymore. The Build Action of all my image-files are set to "Resource" and the Copy to Output Directory is set to "Do Not Copy". They are shown as expected, here's an example of how they are set:
<ribbon:RibbonApplicationMenu SmallImageSource="/Voetbal;component/Images/Ball_16.png">
//or
<ribbon:RibbonButton LargeImageSource="/Voetbal;component/Images/Calendar_32.png" />
//or
<Image Source="/Voetbal;component/Images/remove.png" Width="16" Height="16" />
But I also have images that have to be set throuch C#. In a UserControl I have a ListView which contains a certain column with following markup:
<GridViewColumn Header="" Width="32">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Icon}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
The ItemsSource for the ListView is a Generic List that contains instances of items that will poulate the ListView. These items have two string-fields and an ImageSource (named 'Icon'). I set the Icon-property like this:
var icon = new BitmapImage(new Uri("/Images/Gold_16.png", UriKind.RelativeOrAbsolute));
myViewModel.Items[0].Icon = icon;
But the problem is that I don't see an image in the ListView. I have also tried following pieces of code. I have used these pieces from answers to similar questions here on SO and on other forums. It's not that I've been lazy or haven't tried anything but I can't figure out how to fix this...
var icon = new BitmapImage(new Uri("/Voetbal;component/Images/Gold_16.png", UriKind.RelativeOrAbsolute));
//or
var icon = new BitmapImage();
icon.BeginInit();
icon.UriSource = new Uri("pack://application:,,,/Voetbal;component/Images/Gold_16.png");
icon.EndInit();
//or
var icon = new BitmapImage();
icon.BeginInit();
icon.UriSource = new Uri("pack://application:,,,/Images/Gold_16.png");
icon.EndInit();
PS: I know the binding of my ViewModel works because the two string-properties are correctly shown in other columns in the ListView.
Does anyone know how I can set the ImageSource and bind it correctly to the ListView?
Thanks in advance!

myViewModel.Items[0].Icon = "Images/Gold_16.png";
Please try the above code. Make the Icon property to string

PivotViewer v2 dynamic collection AND deep zoom images

I am using the PivotViewer v2 released with Silverlight 5. I've started to use the new data binding ability of the PivotViewer, binding directly to data objects that are passed down from the server, and using an ItemTemplate to display the objects in the PivotViewer.
With CXML, I could pre-generate the DZCs/DZIs for the pivot viewer (it's a JIT collection), but I can't figure out how to use Deep Zoom imaging + the new Pivotviewer with data binding. How can I display a deep zoom image in an item template for a collection that is data bound?
I've tried using the PivotViewerMultiSizeImage class (XAML below) and the PivotViewerMultiScaleSubImageHost class. My example below almost works: it displays an image, but seems to be stuck at the 100 pixel level - no Deep Zoom. I've also tried the MultiScaleImage control with DZIs, but no luck - it generates an OutOfMemory exception immediately.
Does anyone know how to get Deep Zoom capability with data binding in the new PivotViewer?
<pivot:PivotViewer.ItemTemplates>
<pivot:PivotViewerItemTemplate>
<pivot:PivotViewerMultiSizeImage Width="100" Height="100">
<pivot:PivotViewerMultiSizeImage.Sources>
<pivot:PivotViewerMultiSizeImageSource MaxHeight="100" MaxWidth="100" UriSource="{Binding Images[2]}" />
<pivot:PivotViewerMultiSizeImageSource MaxHeight="300" MaxWidth="300" UriSource="{Binding Images[3]}" />
<pivot:PivotViewerMultiSizeImageSource MaxHeight="500" MaxWidth="500" UriSource="{Binding Images[4]}" />
<pivot:PivotViewerMultiSizeImageSource MaxHeight="700" MaxWidth="700" UriSource="{Binding Images[5]}" />
<pivot:PivotViewerMultiSizeImageSource MaxHeight="20000" MaxWidth="20000" UriSource="{Binding Images[6]}" />
</pivot:PivotViewerMultiSizeImage.Sources>
</pivot:PivotViewerMultiSizeImage>
</pivot:PivotViewerItemTemplate>
</pivot:PivotViewer.ItemTemplates>

I've implemented binding to a collection of objects but am using a deep zoom collection for the images. I used the Excel tool but only gave it the path to the images (sorted by Name) and a name. I didn't use the cxml file, but did use all of the rest of the deep zoom image files. I added a property to the data objects in the collection, called Img. Img is the image number index in the image collection for that object (0 based). Then, my PivotViewer ItemTemplate binds to this property. The CollectionSource property is set to the path to my image collection xml file(it is named in the generated cxml).
<Visualizer:MyPivotViewer x:Name="RedemptionPivot" >
<Pivot:PivotViewer.ItemTemplates>
<Pivot:PivotViewerItemTemplate >
<Pivot:PivotViewerMultiScaleSubImageHost ImageId="{Binding Img}" CollectionSource="http://www.redemptionlive.com/Visualizer5/RedemptionCards_files/e3tbc2s0.4td.xml"/>
</Pivot:PivotViewerItemTemplate>
</Pivot:PivotViewer.ItemTemplates>
<Pivot:PivotViewer.PivotProperties>
<Pivot:PivotViewerStringProperty Id="Name" Options="CanFilter,CanSearchText" DisplayName="Name" Binding="{Binding Name}" />
<!--The rest of the properties go here-->
</Pivot:PivotViewer.PivotProperties>
</Visualizer:MyPivotViewer>

You're getting a 100x100 image because you are specifying this as the size of your control. Change the size of
<pivot:PivotViewerMultiSizeImage Width="100" Height="100">
to
<pivot:PivotViewerMultiSizeImage Width="2000" Height="2000">
or something big enough to cause the largest image to show. Also, I'm not sure if this matters or not, but I didn't put a MaxHeight/MaxWidth on my largest image.
This worked for me, thanks for halfway figuring this out because you lead me down the right path to getting deep zoom like functionality with databinding!