When we create questions on SO there is a box to write your message that has Bold, Italic and code brackets.
Is there a similar template for this in C#/wpf??
Not is c#; I'm not sure that makes sense. If you're talking about an asp.net rich text editor control, nope there too.
What I've used in the past is one built in jquery that works well with my .net websites. Page validation can be tricky though, since it will recognize the input as potentially dangerous.
Here's a link to jWYSIWYG, the editor I'm talking about: https://github.com/akzhan/jwysiwyg
No, there isn't.
Try DevExpress DXRichEdit.
I noticed that in less that 20 lines you can get this functionality in WPF:
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="Edit">
<MenuItem Command="Cut" Header="_Cut" />
<MenuItem Command="Copy" Header="C_opy" />
<MenuItem Command="Paste" Header="_Paste" />
</MenuItem>
</Menu>
<ToolBarTray DockPanel.Dock="Top">
<ToolBar>
<Button Command="Cut" Content="Cut" />
<Button Command="Copy" Content="Copy" />
<Button Command="Paste" Content="Paste" />
</ToolBar>
</ToolBarTray>
<TextBox SpellCheck.IsEnabled="True" />
</DockPanel>
Would just be really nice to get Bold/Italic and code brackets.
Related
I'm trying to make a shared menu between something on my top menu bar of my app, and the right click context menu of something in my interface in WPF. I've googled aroudn but I can't figure out hwo to share ONLY the menuitems list.
Here is a picture of the UI to help describe it:
The way this works is when an item in the list (as shown in the background) is selected, this menu becomes available to use. I would like to make it so that when you right click an item in the list, it also shows the same menu. I would like to avoid duplicating code, so I defined a resource for MenuItem in my window resources:
<MenuItem x:Key="modUtilsMenu">
<MenuItem Header="{Binding SelectedMod.ModName}" IsEnabled="False" FontWeight="Bold" />
<MenuItem Header="{DynamicResource string_Checkforupdates}" Command="{Binding SelectedModCheckForUpdatesCommand}" ToolTip="{DynamicResource string_tooltip_checksForUpdatesToThisMod}" >
<MenuItem.Icon>
<fa:ImageAwesome Style="{StaticResource EnableDisableImageStyle}" Icon="Cloud" Foreground="{DynamicResource {x:Static adonisUi:Brushes.ForegroundBrush}}" Height="16" Width="16"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="{DynamicResource string_RestoremodfromME3Tweaks}" Command="{Binding RestoreModFromME3TweaksCommand}" ToolTip="{DynamicResource string_tooltip_forcesUpdateCheck}" >
<MenuItem.Icon>
<fa:ImageAwesome Style="{StaticResource EnableDisableImageStyle}" Icon="CloudDownload" Foreground="{DynamicResource {x:Static adonisUi:Brushes.ForegroundBrush}}" Height="16" Width="16" RenderOptions.BitmapScalingMode="HighQuality"/>
</MenuItem.Icon>
</MenuItem>
...
I then add it to the interface as a sub element of the Mod Utils menuitem:
<MenuItem Header="{DynamicResource string_ModUtils}" Padding="4" IsEnabled="{Binding SelectedMod, Converter={StaticResource NullEnabledConverter}}">
<StaticResource ResourceKey="modUtilsMenu"/>
</MenuItem>
Obviously this doesn't work as it has a second MenuItem defined in the resource.
However, I am not sure how I can store a "list" of menu items to add as children of another object, as the root container element of MenuItem and ContextMenu are not the same. These are all command based menu items. I will have the same issue with a context menu too - how do I only share the contents and not the container? Do I have to do data binding?
I have looked at How do I share a menu definition between a context menu and a regular menu in WPF, but that seems to be just for single menu items. I suppose I could do it for every one of them, but I'm looking to see if there's a way to do this where I only have to update it in one place instead of three to make it work.
Menu and ContextMenu are both of type ItemsControl. You can treat them like this e.g. bind to a collection of item models and specify a DataTemplate.
The following example creates a collection of MenuItem as XAML resource.
To allow multiple instances of the collection it is important to to set the x:Shared attribute to False. Otherwise the menu will be rendered only in one location of the visual tree, no matter the number of references:
<Window>
<Window.Resources>
<x:Array x:Key="SharedMenuItems"
Type="MenuItem"
x:Shared="False">
<MenuItem Header="File">
<MenuItem Header="Save" />
</MenuItem>
<MenuItem Header="Settings" />
</x:Array>
</Window.Resources>
<StackPanel x:Name="RootPanel" viewModels:Item.IsMarkedAsRead="True">
<Menu ItemsSource="{StaticResource SharedMenuItems}" />
<Grid>
<Grid.ContextMenu>
<ContextMenu ItemsSource="{StaticResource SharedMenuItems}" />
</Grid.ContextMenu>
</Grid>
</StackPanel>
</Window>
I try to search on internet but I not find anything. I want to show on the user when is click on the menu in menuitem what is the shortcut for this command (menuitem).
For example I want to make like "Build Solution" and is can see what shortcut is have.
Here is my xaml what I try:
<MenuItem Name="HelpMenuItem" HorizontalContentAlignment="Center" MouseLeave="HelpButtonMouseLeave" MouseEnter="HelpButtonMouseEnter" Header="{catel:LanguageBinding ResourceName=HelpSubMenu}" Command="{Binding Help}">
<MenuItem.InputBindings>
<KeyBinding Key="F1" Gesture="F1" Modifiers="Control" Command="Help" />
</MenuItem.InputBindings>
</MenuItem>
Is it possible to make it only with xaml
You can use InputGestureText property of the MenuItem. According to MSDN it designed exactly for this purporse (https://msdn.microsoft.com/ru-ru/library/system.windows.controls.menuitem.inputgesturetext%28v=vs.110%29.aspx).
<MenuItem Name="HelpMenuItem" Header="Help" InputGestureText="F1" />
Edit
Unfortunately it's not works for root MenuItems. For this case you can write something like this.
<MenuItem>
<MenuItem.Header>
<DockPanel>
<TextBlock Text="Help" Margin="0,0,10,0" />
<TextBlock Text="Ctrl+F1" />
</DockPanel>
</MenuItem.Header>
</MenuItem>
I'm trying to have a dynamic menu item using MVVM from an observable collection. Everything worked, but then I needed to add a "add new" button to the end. I found a solution using a CompositeCollection, like here:
How do I dynamically bind and statically add MenuItems?
So have the following code, where TimeSpans is a collection of ViewModels:
<MenuItem Header="Time Ranges">
<MenuItem.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding TimeSpans}" />
<Separator />
<MenuItem Header="Add New" cal:Message.Attach="NewTimeSpan()" />
</CompositeCollection>
</MenuItem.ItemsSource>
<MenuItem.ItemTemplate>
<ItemContainerTemplate>
<MenuItem Header="{Binding Name}" cal:Message.Attach="ConfigureTimeSpan()" />
</ItemContainerTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
However, the view models are not populated like it was just using ItemsSource="{Binding TimeSpans}", it's not showing anything:
I suspect this is because I'm in the StackOverflow answer above the binding is actually a collection of MenuItems, so that composite collection makes sense. Whereas mine's mixing ViewModels & MenuItems.
Is there any way to construct the collection of menu-items created from ViewModels in the XAML so I can bind it?
For anyone else who comes across this, as Szabolcs Dezsi said, I needed to use a resource for the CollectionViewSource (bad reading comprehension on my part, as that was in the answer linked in my question).
Working code below:
<MenuItem Header="Time Ranges" x:Name="TimeRangesMenuItem">
<MenuItem.Resources>
<CollectionViewSource Source="{Binding ElementName=TimeRangesMenuItem, Path=TimeSpans}" x:Key="TimeSpanMenuItems" />
</MenuItem.Resources>
<MenuItem.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding Source={StaticResource TimeSpanMenuItems}}" />
<Separator />
<MenuItem Header="Add New" cal:Message.Attach="NewTimeSpan()" />
</CompositeCollection>
</MenuItem.ItemsSource>
<MenuItem.ItemTemplate>
<ItemContainerTemplate>
<MenuItem Header="{Binding Name}" cal:Message.Attach="ConfigureTimeSpan()" />
</ItemContainerTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
I have the following piece of code (XAML C#):
<Menu IsMainMenu="True" DockPanel.Dock="Top">
<MenuItem Name="fileMenu" Header="_File" />
<MenuItem Name="editMenu" Header="_Edit" />
<MenuItem Name="setupMenu" Header="_Setup">
<MenuItem Header="_Language">
<MenuItem.Icon>
//I want to insert image here
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem Name="helpMenu" Header="_Help" />
</Menu>
And a resource file named images.resx containing an image called lang.png.
How can I insert the image as an icon for the Menu-Item?
Is there a better way?
As Jason said, it's better to add your images as Resources to your project.
Open "Properties" for your project
Select Vertical-tab Resources
Choose Images from the left ComboBox
Choose "Add Resource -> Add Existing File..." from the right ComboBox
Locate the Image you would like to use, e.g "C1.png" (it will automatically be copied to the Resources folder in the root of your project)
Select properties on your newly added Resource Image
In properties, set Build Action to Resource
Open the designer for the .xaml file containing the Menu and add an Image in MenuItem.Icon and then place the cursor on Image.
xaml
<Menu IsMainMenu="True" DockPanel.Dock="Top">
<MenuItem Name="fileMenu" Header="_File" />
<MenuItem Name="editMenu" Header="_Edit" />
<MenuItem Name="setupMenu" Header="_Setup">
<MenuItem Header="_Language">
<MenuItem.Icon>
<Image/>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem Name="helpMenu" Header="_Help" />
</Menu>
From properties you can now select the symbol on the Source Property and all available Image resources will be displayed.
From this dialog you can also choose "Add", locate an image file on the disk and all the above steps will be made for you by Visual Studio.
The resulting uri for the Image.Source in xaml will look something like this (which ofcourse also can be added by hand)
<Menu IsMainMenu="True" DockPanel.Dock="Top">
<MenuItem Name="fileMenu" Header="_File" />
<MenuItem Name="editMenu" Header="_Edit" />
<MenuItem Name="setupMenu" Header="_Setup">
<MenuItem Header="_Language">
<MenuItem.Icon>
<Image Source="/MenuIconImage;component/Resources/C1.png" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem Name="helpMenu" Header="_Help" />
</Menu>
You could add this, to the Menu.Icon.
<Image>
<Image.Source>
<BitmapImage UriSource="/ASSEMBLYNAME;component/PATH/IMAGE.png" />
</Image.Source>
<Image>
I have written a tool in which a ListBox is bound to a ObserservableCollection<object> with varying datatypes I've define. I use a PropertyDataTemplateSelector to present the data in the ListBox. The PropertyDataTemplateSelector references several DataTemplates that are set as UserControls. There is a background class that provides logic to the PropertyDataTemplateSelector by checking the object type and then applying the correct DataTemplate.
Here's an abbreviated example of the XAML for the UserControls and the MainWindow.
UserControl1
<TextBlock Text="{Binding Path=Val1}"
Style="{StaticResourse Yes}" />
<Button Content="I'm Button 1"
Command="{Binding Path=PathtoCommand1}"
CommandParameter="{Binding Parameter1}"
IsEnabled="{Binding IsEnabled1}" />
<Button Content="I'm Button 2"
Command="{Binding Path=PathtoCommand2}"
CommandParameter="{Binding Parameter2}"
IsEnabled="{Binding IsEnabled2}"
Tag="{Binding Path="DataContext.TagItem2}">
<Button.ContextMenu>
<ContextMenu>
<MenuItem IsCheckable="True"
IsChecked="{Binding Path=Tag}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</UserControl>
UserControlN
<UserControl x:Class="AwesomerControl">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=FancyName2}"
Style="{StaticResourse Yes}" />
<Button Content="Clicker 1"
Command="{Binding Path=DoSomethingGreat1}"
CommandParameter="{Binding Greatness1}"
IsEnabled="{Binding IsTurnedOn1}" />
<Button Content="Clicker 2"
Command="{Binding Path=DoSomethingGreat2}"
CommandParameter="{Binding Greaterness2}"
IsEnabled="{Binding IsTurnedOn2}"
Tag="{Binding Path="DataContext.TagItem2}">
<Button.ContextMenu>
<ContextMenu>
<MenuItem IsCheckable="True"
IsChecked="{Binding Path=Tag}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</UserControl>
Here I set the UserControls to a specified DataTemplate. The UserControls were moved out to make the XAML easier to read/navigate. In actuality the UserControls are a few hundred lines each.
<Window.Resources>
<DataTemplate x:Key"Template1">
<customControls:AwesomeControl/>
</DataTemplate>
...
<DataTemplate x:Key"TemplateN">
<customControls:AwesomerControl/>
</DataTemplate>
<dts:PropertyDataTemplateSelector x:Key="templateselector"
Template1="{StaticResource Template1"}
...
TemplateN="{StaticResource TemplateN"}
</Window.Resources>
The ListBox is defined as this.
<ListBox ItemSource="{Binding Path=CollectionofMyObjects}"
ItemTemplateSelector="{StaticResource templateselector}" />
I am using a single ViewModel to drive the MainWindow and the UserControls.
So that's where I'm at, essentially. I have this currently working as I'd like, but in an ongoing effort to learn (this is my first MVVM/WPF/C# project) I'd like to keep exploring how to make my code "better" (however that's defined). I'm not looking to solve an error here. So to avoid a general/broad question, I'll ask what I think I want to know. Someone can correct me and I'll update the "question(s)" appropriately
Question: How can I go about producing a ViewModel for each of the UserControls? Some of the ViewModels, for the UserControls, will occasionally require two-way communication to the MainWindow_ViewModel. The main crux of my problem is figuring out how the multiple VMs will communicate.
You're close, but it's not quite MVVM yet. ;)
First, break out all the functionality that is relevant to each UserControl into their own classes. These are your view-model classes.
Your controls should now become "view" classes, and they deserve their own mark-up file. Rather than use a template selector, you can use the DataTemplate.DataType to automatically connect the view-model class type to its view.
There are a lot of options for communication between view-models. To further your education, I'd consider looking at a light-weight MVVM framework that has built-in solutions for communication. My personal favorite is Caliburn.Micro, which includes an EventAggregator, a service that provides the ability to publish an object from one view-model to another in a loosely-coupled fashion.
Keep learning, you're on the right track!