Silverlight: why png-image is not displaying? - wpf

In Silverlight 4 application there are few images, both are displayed correctly in design mode, one is displayed correctly in run-time also:
<Image Height="180" Width="149" Source="../Picts/Field.png" />
Another one is not displayed in run-time:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5" Visibility="{Binding SquadSavedVisibility, Mode=OneWay}">
<Image Source="..\Picts\ok.png" Width="16" Height="16" />
<TextBlock Text=" It is saved" Foreground="Green"/>
</StackPanel>
Why? And how to get it displayed?
Any thoughts are welcome. Thanks.

It's all in your slashes, VS Design time doesn't mind you using "..\Picts\ok.png", but Silverlight runtime wants to see "../Picts/ok.png". In other words, your slashes matter.

I had a similar problem with images showing in design-time, but not at runtime. Mine was using a pack URI so I wanted to post that fix as well:
Does not work at runtime, does work at design-time:
<Image Source="mydllname;component/Images/logo.png" />
Works at both design and runtime:
<Image Source="/mydllName;component/Images/logo.png" />
Note the extra '/' before the Pack URI starts.

You can try to hook into the Image.ImageFailed Event. For examples and more explanation you look into this page:
http://msdn.microsoft.com/en-us/library/system.windows.controls.image.imagefailed%28v=VS.95%29.aspx

Related

MahApps Progress Indicator not stretching to content

I have a MahApps progress indicator declared like this:
<Controls:ProgressIndicator ProgressColour="{StaticResource AccentColorBrush}" Width="600" Height="20" VerticalAlignment="Top" HorizontalAlignment="Stretch"
Visibility="{Binding ElementName=Self, Path=DataContext.ShowProgress, Converter={StaticResource b2v}, FallbackValue=Visible}"/>
And for some reason the indicator bars do not stretch the size of the control. It only fills about 20% of the width. (I can't show a picture as my reputation is too low).
Has anyone experienced this before?
Cheers
Edit
The indicator is on a stackpanel declared like this:
<StackPanel Grid.Column="2" Grid.ColumnSpan="6" Orientation="Vertical">
Update:
In the latest version from nuget or Github ProgressIndicator seems to be removed(cos it was buggy).
Pull request that removed the control early this year
This release, again, contains some breaking changes. We try to break things now rather than later, when we release version 1.0 (which is hopefully soon).
A quick overview:
ProgressIndicator is now removed, as it wasn't working as expected. Use MetroProgressBar with IsIndeterminate = True instead, which should give a much smoother experience.
I just tried the sample with
<Controls:MetroProgressBar Width="300"
Margin="0, 10, 0, 0"
Foreground="{DynamicResource AccentColorBrush}"
IsIndeterminate="True"
Maximum="100"
Minimum="0" />

Printing a UserControl that contains an Image?

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.

Silverlight toolkit Accordion bug?

This is my very simple Accordion XAML :-
<toolkit:Accordion Grid.Column="1" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" SelectionMode="OneOrMore" MinHeight="500">
<toolkit:AccordionItem Header="Welcome" Margin="10,0" IsSelected="True" />
<toolkit:AccordionItem Header="Family news" Margin="10,0" />
<toolkit:AccordionItem Header="Random photos" Margin="10,0" />
<toolkit:AccordionItem Header="News articles" Margin="10,0" />
</toolkit:Accordion>
If I click few times on the accordion item very fast I get this exception :-
AccessViolationException
Attempted to read or write protected memory. This is often an indication that other memory is corrupt.
Can anybody tell me what is wrong with this?
Thanks in advance :)
Install latest Toolkit..
http://silverlight.codeplex.com/releases/view/43528#DownloadId=117046
Then create new project. Add Accordion control on it... try to repit the error..
PS: I don't think this is an accordion fault... Accordion work just fine...

Text Outlining Using WPF Shader

I tried to google it out, but is there any sample Shader effect which I could use to produce an outlined FormattedText. I was able to get the outline by using BuildGeometry(), but the performance is very poor!
PS: Since I'm new to this and still learning, it would be helpful if anyone can suggest whether it would be even possible or not.
Here's an easy option I whipped up, but not sure if it's exactly what you want. Just use an OuterGlowBitmapEffect.
You can paste my example straight into Kaxaml to see what it looks like:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="Black">
<TextBlock FontFamily="Arial" FontSize="36" FontWeight="Bold" Text="Text" Foreground="White">
<TextBlock.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Orange" GlowSize="6" />
</TextBlock.BitmapEffect>
</TextBlock>
</Grid>
</Page>

WPF: How to display an image at its original size?

I have a problem with displaying images in WPF.
Here's my code:
<Button HorizontalAlignment="Left" Grid.Column="1" Grid.Row="5" Margin="0,5">
<Button.Content>
<StackPanel Orientation="Horizontal" Margin="10,0">
<Image Source="/images/user_add.png" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" Width="24" Height="24" />
<TextBlock Text="添加" />
</StackPanel>
</Button.Content>
</Button>
I have an image with original size 32*32, but when I ran the above code, the image will stretch to fill all the space, beyond its original size. I also set the "Stretch" property to "None", but it seems that it doesn't work.
So, how can I fix this problem?
Thank you!
Here is a similar question. Generally setting Stretch="None" is enough.
It is also very important what DPI has the image set in metadata. It took me quite a while before figuring out that if the image's DPI is different from the monitor's DPI (usually 96), WPF will automatically resize the image, as it tries to be DPI-independent.
EDIT
The MSDN link is broken, here is the new link:
MSDN Blog - Blurry Bitmaps. Let's keep the old link around to be used for archive.org, in case the new link stops working also.
Try not specifying width or height, use it like this instead:
<Image Source="/images/user_add.png" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Image Source="Images/Background.png" UseLayoutRounding="True" SnapsToDevicePixels="True" Width="600" Height="800" Stretch="Fill" />
This one works for me, for an image with 600x800 pixels and 96dpi.
#rishad2m8 If size is unknown one can detect the size first with https://msdn.microsoft.com/en-us/library/system.drawing.image.size(v=vs.110).aspx I'd guess.
Adding to Paya's answer: to compensate WPF's attempt to adapt to the monitors resolution you should be able to set the Width and Height to the file's original dimensions and use Stretch="Fill". This worked for me.
If you want to display the image with original size, but don't know the image size, I think the best way is to set the image as background of UIElement. Like this:
<Button Height="100" Width="100">
<Button.Background>
<ImageBrush ImageSource="/images/user_add.png" Stretch="None"/>
</Button.Background>
</Button>

Resources