Writing in WPF problems - wpf

I'm trying to write for the first time in WPF and I see that I can't manage the icons in the menus.
My Code is that.
<Grid>
<my:RibbonControl Height="49" HorizontalAlignment="Left" Name="RibbonControl1" VerticalAlignment="Top" Width="503" />
<my:Ribbon Name="Ribbon">
<my:RibbonTab Name="Manage" Header="Διαχείριση" KeyTip="m">
<my:RibbonGroup Name="groupadd" Header="Χρήστες">
<my:RibbonSplitButton x:Name="btnUser" LargeImageSource="/Economy;component/Images/users01.png" Width="30" Height="60" TabIndex="1" FontFamily="Palatino Linotype" FontSize="12" FocusedBackground="#FFE2AB7F" LayoutTransform="{Binding}" MaxHeight="120" MaxWidth="80" Margin="1,0,0,1" OverridesDefaultStyle="False" Padding="0" ToolTipFooterTitle="Επιλογή">
<MenuItem Header="Ανάθεση">
<MenuItem.Icon>
<Image Source="/Economy;component/Images/delegation.jpg" Stretch="Fill" Width="20" Height="20"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Διαγραφή">
<MenuItem.Icon>
<Image Source="/Economy;component/Images/deletion.ico" Stretch="Fill" Width="20" Height="20" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Είσοδος">
<MenuItem.Icon>
<Image Source="/Economy;component/Images/login.jpg" Stretch="Fill" Width="20" Height="20"/>
</MenuItem.Icon>
</MenuItem>
<my:RibbonSeparator />
<MenuItem Header="Έξοδος">
<MenuItem.Icon>
<Image Source="/Economy;component/Images/logout.ico" Stretch="Fill" Width="20" Height="20"/>
</MenuItem.Icon>
</MenuItem>
</my:RibbonSplitButton>
</my:RibbonGroup>
</my:RibbonTab>
</my:Ribbon>
</Grid>
this code produces the following
What I need is to have the icons at the most left site of the menu.
I read another question about that... which is
<ribbon:RibbonSplitButton x:Name="SplitButton3DViews"
ItemsSource="{Binding items}"
Label="Views3D"
IsCheckable="False" >
<ribbon:RibbonSplitButton.Resources>
<Style TargetType="{x:Type ribbon:RibbonMenuItem}">
<Setter Property="Header" Value="{Binding Path=Name}" />
<Setter Property="Command" Value="{Binding Path=cmd}" />
<Setter Property="ImageSource" Value="{Binding Icon}" />
</Style>
</ribbon:RibbonSplitButton.Resources>
</ribbon:RibbonSplitButton>
But it is not working with my page...
Is there some one to assist me on this?

First of all, please state which ribbon control library you are using, as <my:Ribbon> is not part of the built-in .NET framework.
Secondly, I think that <MenuItem> is the wrong element to use inside your ribbon control.
According to this webpage:
http://www.renevo.com/blogs/dotnet/archive/2009/02/10/your-first-wpf-ribbon-application.aspx
a RibbonApplicationMenuItem should be used instead, no mention of MenuItem anywhere. You might not be using the same ribbon control as shown in the webpage, but I'm guessing that your ribbon control requires another element instead of Menuitem.

Related

Customization of wpf expander

I am new to WPF. I want to create a menu like given in the picture in wpf. i have created menu,but don't know how to create extendable menu items
also i want the arrow in shape as underline in picture.
This should get your started.
<Expander HorizontalAlignment="Left" FlowDirection="RightToLeft" Width="200" Background="#394768" Foreground="White" FontSize="16" FontFamily="Verdana">
<Expander.Header>
<Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Expander}}, Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Schedule" />
<Image Grid.Column="1" Source="calendar.png" Width="20" Height="20" />
</Grid>
</Expander.Header>
<Menu Background="#232230" Foreground="White" FontSize="16" FontFamily="Verdana">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<Menu.ItemContainerStyle>
<Style TargetType="MenuItem">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextBlock.TextDecorations" Value="Underline"/>
</Trigger>
</Style.Triggers>
</Style>
</Menu.ItemContainerStyle>
<MenuItem Header="Department Schedule" />
<MenuItem Header="Employee Schedule"/>
<MenuItem Header="Temporary Schedule"/>
<MenuItem Header="Schedule View"/>
</Menu>
</Expander>
Here's the calendar.png that I used for this example (WARNING: IT'S WHITE SO YOU WILL NEED TO CLICK ON IT TO SEE IT):
Now if you want to change the arrow icon to something that looks like the picture you provided, you will need to override the Expander's ControlTemplate entirely, and replace it with your own arrow icon. Here's a good guide from codeproject. It will take some studying and understanding on your part here, so I will leave that exercise up to you.

How to modify Avalon 2.0 startup layout WPF

I have downloaded the avalon 2.0 and on load the tool panel starts on the right and the files panel starts on the left.
I am trying to get the tool panel to dock on the left on load even when I have deleted everything that is related to FileViewModel which loads on the left a blank panel stays on the left.
This image below shows how the window currently loads:
I want to have the tool panel loads on the left like this:(I achieved this by dragging the tool pane on run time.
In my WPF I can only see one LayoutAnchorablePane so I can't see why the screen is split into two?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<MenuItem Header="File">
<MenuItem Header="New" Command="{Binding NewCommand}"/>
<MenuItem Header="Open" Command="{Binding OpenCommand}"/>
<Separator/>
<MenuItem Header="Save" Command="{Binding ActiveDocument.SaveCommand}"/>
<MenuItem Header="Save As..." Command="{Binding ActiveDocument.SaveAsCommand}"/>
<Separator/>
<MenuItem Header="Close" Command="{Binding ActiveDocument.CloseCommand}"/>
</MenuItem>
<MenuItem Header="Tools">
<MenuItem Header="{Binding FileStats.Title, Mode=TwoWay}" IsChecked="{Binding FileStats.IsVisible, Mode=TwoWay}" IsCheckable="True"/>
<MenuItem Header="{Binding Exported.Title, Mode=TwoWay}" IsChecked="{Binding Exported.IsVisible, Mode=TwoWay}" IsCheckable="True"/>
<MenuItem Header="{Binding ExportedResult.Title, Mode=TwoWay}" IsChecked="{Binding ExportedResult.IsVisible, Mode=TwoWay}" IsCheckable="True"/>
<MenuItem Header="{Binding Manifest.Title, Mode=TwoWay}" IsChecked="{Binding Manifest.IsVisible, Mode=TwoWay}" IsCheckable="True"/>
</MenuItem>
<MenuItem Header="Layout">
<MenuItem Header="Load" Command="{Binding LoadLayoutCommand, ElementName=mainWindow}"/>
<MenuItem Header="Save" Command="{Binding SaveLayoutCommand, ElementName=mainWindow}"/>
<MenuItem Header="Dump to Console" Click="OnDumpToConsole"/>
</MenuItem>
</Menu><!--AnchorablesSource="{Binding Tools}" DocumentsSource="{Binding Files}"-->
<avalonDock:DockingManager x:Name="dockManager"
AnchorablesSource="{Binding Tools}"
DocumentsSource="{Binding Files}"
ActiveContent="{Binding ActiveDocument, Mode=TwoWay, Converter={StaticResource ActiveDocumentConverter}}"
Grid.Row="1" >
<avalonDock:DockingManager.LayoutItemTemplateSelector>
<local:PanesTemplateSelector>
<local:PanesTemplateSelector.FileStatsViewTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding FileSize}"/>
<TextBlock Text="{Binding LastModified}"/>
<TextBox Text="test"/>
</StackPanel>
</DataTemplate>
</local:PanesTemplateSelector.FileStatsViewTemplate>
</local:PanesTemplateSelector>
</avalonDock:DockingManager.LayoutItemTemplateSelector>
<avalonDock:DockingManager.LayoutItemContainerStyleSelector>
<local:PanesStyleSelector>
<local:PanesStyleSelector.ToolStyle>
<Style TargetType="{x:Type avalonDock:LayoutAnchorableItem}">
<Setter Property="Title" Value="{Binding Model.Title}"/>
<Setter Property="IconSource" Value="{Binding Model.IconSource}"/>
<Setter Property="Visibility" Value="{Binding Model.IsVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter={x:Static Visibility.Hidden}}"/>
<Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
<Setter Property="IsSelected" Value="{Binding Model.IsSelected, Mode=TwoWay}"/>
<Setter Property="IsActive" Value="{Binding Model.IsActive, Mode=TwoWay}"/>
</Style>
</local:PanesStyleSelector.ToolStyle>
</local:PanesStyleSelector>
</avalonDock:DockingManager.LayoutItemContainerStyleSelector>
<avalonDock:DockingManager.LayoutUpdateStrategy>
<local:LayoutInitializer/>
</avalonDock:DockingManager.LayoutUpdateStrategy>
<avalonDock:LayoutRoot>
<avalonDock:LayoutPanel Orientation="Horizontal" >
<avalonDock:LayoutAnchorablePane Name="ToolsPane" DockHeight="150" >
</avalonDock:LayoutAnchorablePane>
<avalonDock:LayoutDocumentPane />
</avalonDock:LayoutPanel>
</avalonDock:LayoutRoot>
</avalonDock:DockingManager>
</Grid>
this seems to work, but take care that the sample is saving the state
<avalonDock:LayoutRoot>
<avalonDock:LayoutPanel Orientation="Horizontal">
<avalonDock:LayoutAnchorablePane Name="ToolsPane" DockWidth="100">
<avalonDock:LayoutAnchorable>
<TextBlock>tototo</TextBlock>
</avalonDock:LayoutAnchorable>
</avalonDock:LayoutAnchorablePane>
<avalonDock:LayoutDocumentPane/>
</avalonDock:LayoutPanel>
</avalonDock:LayoutRoot>
</avalonDock:DockingManager>

using a ListBox In WPF

I've never done any work in wpf before and i'm supposed to add an undo button. I want it to look like what the undo button in VS looks like (click to undo once, hover over to get the more in depth listbox). I managed to get whats in the picture. It is inside a menuitem and i can't figure out how to just make it a white box without any borders or anything. Please Help!
Here's code:
<MenuItem Header="Edit" Width="50" HorizontalContentAlignment="Center" >
<MenuItem x:Name="MenuCopy" Header="Copy to Excel" >
<MenuItem.Icon>
<Image Source="copy.ico" Width="24" Height="24" />
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="MenuUndo" Header="Undo Last Action" IsEnabled="true">
<MenuItem.Icon>
<Image Source="Undo.png" Width="24" Height="24" />
</MenuItem.Icon>
<ListBox>
<ListBoxItem Name="Item" Height="10" Width="100">
</ListBoxItem>
</ListBox>
</MenuItem>
you may try to override the ControlTemplate and set the styles and remove padding, borders.
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
...
</ControlTemplate>
</Setter.Value>
</Setter>
Check this msdn link for Listbox style.

Resizing Icon of MenuItems in WPF

How to resize the icon of the menu and menuitems in WPF C#
I have done following
<DockPanel>
<Menu Background="CadetBlue" Height="53" Width="500" IsMainMenu="True" DockPanel.Dock="Top" VerticalAlignment="Top">
<MenuItem Padding="40,0,0,0" Header="File" Foreground="#FF383131" FontSize="20" Background="Beige" Width="100" Height="50" >
<MenuItem.Icon>
<Image Source="/WPFMenuItem;component/Images/garden.jpg" Stretch="Uniform"/>
</MenuItem.Icon>
<MenuItem Header="New" FontSize="20">
<MenuItem.Icon>
<Image Source="/WPFMenuItem;component/Images/garden.jpg" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Exit" FontSize="20">
<MenuItem.Icon>
<Image Source="/WPFMenuItem;component/Images/ic_launch_man.png" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
<TextBox />
</DockPanel>
I have increased width,height and margin but did not work?
Try using a render transform and set the X and Y scale.
http://msdn.microsoft.com/en-us/library/ms750596(v=vs.110).aspx
<Image Source="/WPFMenuItem;component/Images/garden.jpg" Stretch="Uniform" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform X="2" Y="3.7"/>
</TransformGroup>
</Image.RenderTransform>
</Image>

WPF menu and header images

I need to have an image instead of text in my menu header. I have written a code but its not showing up the image.
Following is my xaml part for it.
<Menu Height="50" Width="50" VerticalAlignment="Top" IsMainMenu="True">
<MenuItem Height="50" Width="50">
<MenuItem.Header>
<Image HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="50" Source="Images/pulsesi_icon_black.PNG"/>
</MenuItem.Header>
</MenuItem>
</Menu>
Help me out of it, I don't need an Icon.
you can use Menuitem.Icon for image in header.
<MenuItem >
<MenuItem.Icon>
<Image Width="20" Height="20" Source="/Resources/Images/Key.jpg" />
</MenuItem.Icon>
</MenuItem>

Resources