Develop Reference

How to modify Image Source in WPF XAML dynamically

I have a WPF App that has (so far) 2 modes of display, regularmode and widgetmode.
I am using Prism 6 with MVVM design pattern.
MainWindowViewModel knows the mode of display.
ToolBarView has, as expected, a toolbar of buttons and the buttons shall be dynamically changed to different images depending on the mode of the view. If the mode is WidgetMode, it switches to the image with an identical name but with an '_w' added. So instead of "image.png", it's "image_w.png".
What I'd like to do is create a string in ToolBarView that is updated to either String.Empty or to "_w", depending on the mode. I'd also like the image root folder to be a global string, rather than a hardcoded string, so I have defined that in app.xaml.
<Application.Resources>
<sys:String x:Key="ImageURIRoot">/MyApp;component/media/images/</sys:String>
</Application.Resources>
Then in my toolbarview (a usercontrol), I did this:
<UserControl.Resources>
<converters:StringToSourceConverter x:Key="strToSrcConvert"/>
<sys:String x:Key="BtnImgSuffix">_w</sys:String>
.
.
.
</UserControl.Resources>
Note that the string is hardcoded; eventually, I will change it dynamically based off the windowmode.
I then put the Buttons in a Listbox
<ListBoxItem Style="{StaticResource MainButton_Container}">
<Button Command="{Binding ButtonActionDelegateCommand}" Style="{StaticResource Main_Button}">
<Image Source="{Binding Source={StaticResource ImageURIRoot}, Converter={StaticResource strToSrcConvert}, ConverterParameter='{}{0}button.png'}" />
</Button>
</ListBoxItem>
Converter code:
public class StringToSourceConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (parameter is string)
{
return string.Format(parameter.ToString(), value);
}
return null;
}
public object ConvertBack(object value, Type targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
return null;
}
}
So that works. But what I want is to have the ConverterParameter equal "{}{0}button{1}.png", where {0} is the URI Root and {1} is the suffix. But I can't figure out how to do it. I know it's simple, but I can't put my finger on it!
Please help!

Figured it out and it was through multibinding. The way I did it was create a converter that inherits from IMultiValueConverter. Its "Convert" method looks like this:
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
ImageSourceConverter conv = new ImageSourceConverter();
int suffixPos = ((String)parameter).Length - 4;
var returnValue = ((String)parameter).Insert(suffixPos, values[1].ToString());
returnValue = Path.Combine(values[0].ToString(), returnValue);
ImageSource imgsrc = conv.ConvertFromString(returnValue) as ImageSource;
return imgsrc;
}
The xaml looks like this:
<Image Height="30" Width="40" diag:PresentationTraceSources.TraceLevel="High">
<Image.Source>
<MultiBinding Converter="{StaticResource stringsToSrcConvert}" ConverterParameter="buttonImg.png">
<Binding Source="{StaticResource ImageURIRoot}"/>
<Binding Source="{StaticResource BtnImgSuffix}"/>
</MultiBinding>
</Image.Source>
</Image>
Also, had to modify the URIRoot
<Application.Resources>
<sys:String x:Key="ImageURIRoot">pack://application:,,,/MyApp;component/media/images/</sys:String>
</Application.Resources>
Thanks, Clemens!

WPF Binding from strings to Canvas objects in a ResourceDictionary using Converter

I have a ResourceDictionary made up of icons/Canvas objects drawn with Paths. My ViewModel includes a string property (IconName) that contains a string matching one of the entries in the ResourceDictionary. I developed a MultiBinding (IMultiValueConverter) that takes the string, and a FrameworkElement and does a resource lookup, returning the resource matching the name. Before getting to this point, I stubbed my View explicitly with the following:
<Rectangle Width="10" Height="10" Margin="0,0,10,0">
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{StaticResource defalt_icon}" />
</Rectangle.Fill>
</Rectangle>
This renders correctly. However, when I switch out to the following, nothing is rendered in the Rectangle.
<Rectangle Width="10" Height="10" Margin="0,0,10,0">
<Rectangle.Fill>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<MultiBinding Converter="{StaticResource IconNameConverter}">
<MultiBinding.Bindings>
<Binding RelativeSource="{RelativeSource AncestorType=FrameworkElement}"/>
<Binding Path="IconName"/>
</MultiBinding.Bindings>
</MultiBinding>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
My converter (show below) is being called, and does find the Canvas object and returns it (viewing the object in the debugger I can see that Canvas has a Path child that has the right Data member filled in).
public class IconNameConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
FrameworkElement targetElement = values[0] as FrameworkElement;
string iconName = values[1] as string;
if (iconName == null)
return null;
FrameworkElement newIcon = (FrameworkElement)targetElement.TryFindResource(iconName);
if (newIcon == null)
newIcon = (FrameworkElement)targetElement.TryFindResource("appbar_page_question");
return newIcon;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Any ideas why the canvas isn't showing up?

Why does only one out of two multibindings work?

I am using a MultiBinding in two different points in my XAML. Here is the code:
<StatusBarItem>
<StackPanel Orientation="Horizontal">
<TextBlock Text="X " />
<TextBlock>
<TextBlock.Text>
<MultiBinding Converter="{StaticResource CoordinateToStringConverter}" TargetNullValue="-">
<Binding Path="ChartMouseX" />
<Binding Path="AxisSettingsViewModel.XAxisSettings.LabelFormat" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Text=" Y " />
<TextBlock>
<TextBlock.Text>
<MultiBinding Converter="{StaticResource CoordinateToStringConverter}" TargetNullValue="-">
<Binding Path="ChartMouseY" />
<Binding Path="AxisSettingsViewModel.YAxisSettings.LabelFormat" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</StackPanel>
</StatusBarItem>
I am facing a weird issue. The first MultiBinding works perfectly, but the second one is never called. If I comment out the first MultiBinding, the second one starts to work as expected.
Is this some kind of limitation in WPF? Or am I missing something about multibindings?
P.S: The RaisePropertyChanged is correctly invoked. However, in the second binding the converter does not get called at all.
EDIT
Here is the code of the Converter:
using System;
using System.Globalization;
using System.Windows.Data;
namespace LogViewer.Converters
{
public class CoordinateToStringConverter : IMultiValueConverter
{
#region IMultiValueConverter members
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
if (values != null && values.Length == 2)
{
object value = values[0];
string format = values[1].ToString();
if (value is DateTime)
return ((DateTime)value).ToString(format);
if (value is TimeSpan)
return ((TimeSpan)value).ToString();
if (value is double)
return ((double)value).ToString(format);
}
return null;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
#endregion
}
}

I have analyzed your issue. Which is working fine for me. Nothing wrong with the multibinding.
Have you checked the converter with breakpoint was it called two times. Otherwise your problem is in ChartMouseY and ChartMouseX.

WPF ColumnDataPoint Annotation partial visible

I have chart with column series in my application. I'm using solution from this tutorial to add annotation on top of columns:
http://blogs.msdn.com/b/delay/archive/2009/07/27/simple-column-labels-you-can-create-at-home-re-templating-the-silverlight-wpf-data-visualization-columndatapoint-to-add-annotations.aspx
When the bar is really tall the top part of the annotation is only partial visible, or not visible.
I do not know range of my data, so I can not set Maximum value on the vertical Axis.
How to solve this problem?

Like Andre said, the problem is your Margin, so you could use Multibinding to calculate the Margin like so:
<ControlTemplate TargetType="charting:ColumnDataPoint">
<Grid>
<Rectangle Name="clmnRectangle"
Fill="{TemplateBinding Background}"
Stroke="Black"/>
<Grid Background="#aaffffff"
HorizontalAlignment="Center"
VerticalAlignment="Top">
<Grid.Margin>
<MultiBinding Converter="{StaticResource ResourceKey=HeightToMargin}">
<Binding Path="ActualHeight" RelativeSource="{RelativeSource AncestorType={x:Type charting:ColumnDataPoint}}"></Binding>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource AncestorType={x:Type charting:ColumnSeries}}"></Binding>
</MultiBinding>
</Grid.Margin>
<TextBlock Name="tbValue"
Text="{TemplateBinding FormattedDependentValue}"
FontWeight="Bold"
Margin="2"/>
</Grid>
</Grid>
</ControlTemplate>
The Converter could look like:
public class HeightToMarginConverter:IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo ci)
{
double clmnHeight = System.Convert.ToDouble(values[0]);
double chrtHeight = System.Convert.ToDouble(values[1]);
if (chrtHeight - clmnHeight < 20)
{
return new Thickness(0, clmnHeight - chrtHeight + 5, 0, 0);
}
else
{
return new Thickness(0, -20, 0, 0);
}
}
public object[] ConvertBack(object value, Type[] targetType, object parameter, CultureInfo ci)
{
return null;
}
}

Set a default name to a combobox in WPF

I have a combobox filled with int's representing years. The years I have add them to an ObservableCollection, but my problem is when I load the project the combobox its blank by default. I want to set a default name to it, like "Years", but I don't want solution like set the isEditable to true, or inserting a string at the beginning. I want a pure xaml solution if it is posible.
This is my current xaml file:
<RSControls:SmoothScrollComboBox Grid.Column="1" x:Name="compilationYearCombo" Margin="7,2.04,0,2.04"
SelectedValue="{Binding Path=SelectedYear}"
SelectedValuePath=""
ItemsSource="{Binding Years}"
DisplayMemberPath="" SelectionChanged="compilationYearCombo_SelectionChanged" IsSynchronizedWithCurrentItem="True" Grid.ColumnSpan="2" IsEditable="False" SelectedIndex="0" IsReadOnly="False" Text="Years">
</RSControls:SmoothScrollComboBox>
I tried adding a <TextBlock Text="Years" /> , but that only changed all the elements in the combo to "Years".
I apreciatte a detail explenation how to this, I am just a beginner with WPF.
Thanks.

You can add a visibility converter to your TextBlock
<TextBlock
Visibility="{Binding SelectedItem, ElementName=compilationYearCombo, Converter={StaticResource NullToVisibilityConverter}}"
IsHitTestVisible="False"
Text="Years" />
with this converter:
public class NullToVisibilityConverter : IValueConverter
{
#region Implementation of IValueConverter
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return value == null ? Visibility.Visible : Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}

To show the default text ' -- Select Value --' in Combo Box
<ComboBox Height="23" HorizontalAlignment="Left" Margin="180,18,0,0" Name="cmbExportData" VerticalAlignment="Top" Width="148" ItemsSource="{Binding}" Text="-- Select Value --" AllowDrop="False" IsEditable="True" IsManipulationEnabled="False" IsReadOnly="True" />