❔ Fontawesome icons dont support converting in WPF
Hi, im following a youtube tutorial on how to do a calendar UI and in one of the steps im supposed to make the following inside a UserControl
So basically after adding this new binding methods on the icons and text im getting errors on the icon converter -> Error XDG0028 The TypeConverter for "Icon" does not support converting from a string
public partial class Items : UserControl
{
public Items()
{
InitializeComponent();
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(MenuButton));
public string Time
{
get { return (string)GetValue(TimeProperty); }
set { SetValue(TimeProperty, value); }
}
public static readonly DependencyProperty TimeProperty =
DependencyProperty.Register("Time", typeof(string), typeof(MenuButton));
public SolidColorBrush Color
{
get { return (SolidColorBrush)GetValue(ColorProperty); }
set { SetValue(ColorProperty, value); }
}
public static readonly DependencyProperty ColorProperty =
DependencyProperty.Register("Color", typeof(SolidColorBrush), typeof(MenuButton));
public FontAwesome.Sharp.Icon Icon
{
get { return (FontAwesome.Sharp.Icon)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}
public static readonly DependencyProperty IconProperty =
DependencyProperty.Register("Icon", typeof(FontAwesome.Sharp.Icon), typeof(MenuButton));
public FontAwesome.Sharp.Icon IconBell1
{
get { return (FontAwesome.Sharp.Icon)GetValue(IconBell1Property); }
set { SetValue(IconBell1Property, value); }
}
public static readonly DependencyProperty IconBell1Property =
DependencyProperty.Register("IconBell1", typeof(FontAwesome.Sharp.Icon), typeof(MenuButton));
}
public partial class Items : UserControl
{
public Items()
{
InitializeComponent();
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(MenuButton));
public string Time
{
get { return (string)GetValue(TimeProperty); }
set { SetValue(TimeProperty, value); }
}
public static readonly DependencyProperty TimeProperty =
DependencyProperty.Register("Time", typeof(string), typeof(MenuButton));
public SolidColorBrush Color
{
get { return (SolidColorBrush)GetValue(ColorProperty); }
set { SetValue(ColorProperty, value); }
}
public static readonly DependencyProperty ColorProperty =
DependencyProperty.Register("Color", typeof(SolidColorBrush), typeof(MenuButton));
public FontAwesome.Sharp.Icon Icon
{
get { return (FontAwesome.Sharp.Icon)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}
public static readonly DependencyProperty IconProperty =
DependencyProperty.Register("Icon", typeof(FontAwesome.Sharp.Icon), typeof(MenuButton));
public FontAwesome.Sharp.Icon IconBell1
{
get { return (FontAwesome.Sharp.Icon)GetValue(IconBell1Property); }
set { SetValue(IconBell1Property, value); }
}
public static readonly DependencyProperty IconBell1Property =
DependencyProperty.Register("IconBell1", typeof(FontAwesome.Sharp.Icon), typeof(MenuButton));
}
5 Replies
XAML Code(didnt fit all in one message)
Any Solutions?
<Grid Margin="30 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<fa:IconImage Icon="{Binding Path=Icon, ElementName=item}" Width="20" Height="20" VerticalAlignment="Top" Foreground="#f1f1f1" Margin="0 3 0 0"/>
<StackPanel Grid.Column="1" Margin="10 0">
<TextBlock FontSize="16" Foreground="{Binding Path=Color, ElementName=item}" Text="{Binding Path=Title, ElementName=item}"/>
<StackPanel Orientation="Horizontal" Margin="0 5 0 0">
<fa:IconImage Grid.Column="2" Icon="{Binding Path=IconBell1, ElementName=item}" Width="12" Height="12" Foreground="{Binding Path=Color, ElementName=item}"/>
<TextBlock FontFamily="12" Foreground="{Binding Path=Color, ElementName=item}" Text="{Binding Path=Time, ElementName=item}" Margin="8 0 0 0"/>
</StackPanel>
</StackPanel>
<ToggleButton x:Name="buttonMenu" Grid.Column="2">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<fa:IconImage Icon="EllipsisV" Width="16" Height="16" Foreground="#f1f1f1">
<fa:IconImage.Style>
<Style TargetType="fa:IconImage">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1.2" ScaleY="1.2"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</fa:IconImage.Style>
</fa:IconImage>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=buttonMenu}" AllowsTransparency="True" StaysOpen="False" PlacementTarget="{Binding ElementName=buttonMenu}" Placement="Left"
VerticalOffset="30" HorizontalOffset="15">
<Border Background="White" CornerRadius="5" Padding="0 4">
<StackPanel>
<local:MenuButton Icon="Check" Caption="Check"/>
<local:MenuButton Icon="BellSlash" Caption="Mute"/>
<local:MenuButton Icon="Pencil" Caption="Edit"/>
<local:MenuButton Icon="Trash" Caption="Delete"/>
</StackPanel>
</Border>
</Popup>
</Grid>
<Grid Margin="30 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<fa:IconImage Icon="{Binding Path=Icon, ElementName=item}" Width="20" Height="20" VerticalAlignment="Top" Foreground="#f1f1f1" Margin="0 3 0 0"/>
<StackPanel Grid.Column="1" Margin="10 0">
<TextBlock FontSize="16" Foreground="{Binding Path=Color, ElementName=item}" Text="{Binding Path=Title, ElementName=item}"/>
<StackPanel Orientation="Horizontal" Margin="0 5 0 0">
<fa:IconImage Grid.Column="2" Icon="{Binding Path=IconBell1, ElementName=item}" Width="12" Height="12" Foreground="{Binding Path=Color, ElementName=item}"/>
<TextBlock FontFamily="12" Foreground="{Binding Path=Color, ElementName=item}" Text="{Binding Path=Time, ElementName=item}" Margin="8 0 0 0"/>
</StackPanel>
</StackPanel>
<ToggleButton x:Name="buttonMenu" Grid.Column="2">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<fa:IconImage Icon="EllipsisV" Width="16" Height="16" Foreground="#f1f1f1">
<fa:IconImage.Style>
<Style TargetType="fa:IconImage">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1.2" ScaleY="1.2"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</fa:IconImage.Style>
</fa:IconImage>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=buttonMenu}" AllowsTransparency="True" StaysOpen="False" PlacementTarget="{Binding ElementName=buttonMenu}" Placement="Left"
VerticalOffset="30" HorizontalOffset="15">
<Border Background="White" CornerRadius="5" Padding="0 4">
<StackPanel>
<local:MenuButton Icon="Check" Caption="Check"/>
<local:MenuButton Icon="BellSlash" Caption="Mute"/>
<local:MenuButton Icon="Pencil" Caption="Edit"/>
<local:MenuButton Icon="Trash" Caption="Delete"/>
</StackPanel>
</Border>
</Popup>
</Grid>
I recommend not hacking in Fontawesome icons, but using a library integrated with WPF instead
https://github.com/MahApps/MahApps.Metro.IconPacks
wdym by hacking? I used a nugget package available on VS
and how does the GitHub repo fix my issue?<a:ChillBar_confused:1001503745361858590>
The Icon dp is confusing, could you clarify what the requirement is?
Was this issue resolved? If so, run
/close - otherwise I will mark this as stale and this post will be archived until there is new activity.