Avalon dock DocumentTitleTemplate vs DocumentHeaderDataTemplate - wpf

Can you please explain the difference between DocumentHeaderDataTemplate and DocumentTitleTemplate in avalonDock.
They are properties of DockingManger, but I want to be sure how to use them.
<xcad:DockingManager DocumentsSource="{Binding OpenViewers}"
x:Name="MainTabControl"
LayoutItemTemplate="{StaticResource imageSelectionTemplate}"
ActiveContent="{Binding ActiveTabItem, Mode=TwoWay}"
DocumentHeaderTemplate="{StaticResource DocumentHeaderDataTemplate}"
DocumentTitleTemplate="{StaticResource DocumentTitleDataTemplate}"
IsHitTestVisible="True"
VerticalContentAlignment="Stretch"
VerticalAlignment="Stretch">

DocumentTitleTemplate is use in the Template of FloatingDocumentWindow.
DocumentHeaderTemplate is used in the Template of LayoutDocumentTabItem.

Related

How to start using Ribbons in WPF

I tried referencing the System.Windows.Controls.Ribbon, the toolbox tab does not show up. If I right-click a tab and click show all, the tab is there, but controls aren't light up. I can add a tab and controls related manually, but after adding the ribbon, things like quickaccesstoolbar and menuitem does not work properly - they are being treated as tabs for some reason. Control groups don't work as well. Simply nothing works as it's supposed to.
I have tried editing XAML directly. It fails in the same manner as using the designer.
The tutorials online are either outdated, for a paid control suite, or simply don't work.
I don't want to use mark-up solutions like http://www.codeproject.com/Articles/364272/Easily-Add-a-Ribbon-into-a-WinForms-Application-Cs , I want something that works in a designer -- Is that too much to ask? If so I'll gladly go back to winforms.
If you work with ribbons, how did you do it? This question seems simple, but after digging for hours I still don't have an answer.
I'm an individual developer, making an open source, free software. As a student I really can't afford 1000$ control suites. I use VS2013 community, I tried using 2015 instead, but all the problems above are the same.
Add this reference:
and this namespace in the XAML file:
and try working with this code example:
<DockPanel>
<Ribbon DockPanel.Dock="Top" Margin="0,-22,0,0">
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu SmallImageSource="Images/list.png">
<RibbonApplicationMenu.AuxiliaryPaneContent>
<RibbonGallery ScrollViewer.VerticalScrollBarVisibility="Auto">
<RibbonGalleryCategory MaxColumnCount="1">
<RibbonGalleryItem
x:Name="GalleryItem1" Content="Application menu content"
MouseOverBackground="Transparent"
MouseOverBorderBrush="Transparent"
CheckedBackground="Transparent"
CheckedBorderBrush="Transparent"
/>
<RibbonGalleryItem>
<Hyperlink x:Name="hl1" Click="hl1_Click">
<Run Text="http://www.bing.com"/>
</Hyperlink>
</RibbonGalleryItem>
</RibbonGalleryCategory>
</RibbonGallery>
</RibbonApplicationMenu.AuxiliaryPaneContent>
<RibbonApplicationMenuItem x:Name="menuItem1" Header="Add"
ImageSource="Images/add.png"/>
<RibbonApplicationMenuItem x:Name="menuItem2" Header="Settings"
ImageSource="Images/system_preferences.png"/>
<RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<RibbonTab x:Name="rbnTab1" Header="Tab1">
<RibbonGroup x:Name="rbnGr1" Header="General">
<RibbonButton x:Name="btnRibbon1" Label="Save"
LargeImageSource="Images/filesave.png"/>
<RibbonButton x:Name="btnRibbon2" Label="Open"
LargeImageSource="Images/load.png"/>
</RibbonGroup>
<RibbonGroup x:Name="rbnGr2" Header="New group">
<RibbonButton x:Name="btnRibbon3" Label="Font"
LargeImageSource="Images/fonts.png"/>
<RibbonButton x:Name="btnRibbon4" Label="Delete"
LargeImageSource="Images/recycle_bin.png"/>
</RibbonGroup>
</RibbonTab>
<RibbonTab x:Name="rbnTab2" Header="Tab2">
<RibbonGroup x:Name="rbnGr3" Header="Other Group">
<RibbonButton x:Name="btnRibbon5" Label="Play"
LargeImageSource="Images/play.png"/>
<RibbonButton x:Name="btnRibbon6" Label="List"
LargeImageSource="Images/kmenuedit.png"/>
</RibbonGroup>
<RibbonGroup x:Name="rbnGr4" Header="What a group">
<RibbonButton x:Name="btnRibbon7" Label="Sleep"
LargeImageSource="Images/icon_sleep.png"/>
<RibbonButton x:Name="btnRibbon8" Label="Add"
LargeImageSource="Images/add.png"/>
</RibbonGroup>
</RibbonTab>
</Ribbon>
<Grid>
<!-- add your content here-->
</Grid>
</DockPanel>
You can remove the <Ribbon.ApplicationMenu> if you don't like it by addin this property Visibility="Collapsed"
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu Visibility="Collapsed">
</RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
Please take a look at the following. You should be able to have a very basic idea about Ribbon.
http://blogs.msdn.com/b/wpf/archive/2010/08/03/introducing-microsoft-ribbon-for-wpf.aspx
Sample project download
If you want to run the project, you need to change the project's .NET Framework version to 4.0 or above.
Add System.Window.Controls.Ribbon reference to the project
Remove reference like System.Window.Shell and RibbonControlLibrary
The sample should be able to run after you fixed all the namespaces in xmal and the codebehind .cs
http://blogs.msdn.com/b/wpf/archive/2010/08/03/building-a-simple-ribbon-application-in-wpf.aspx
Microsoft Ribbon for WPF (Get the one with Sample for more comprehensive sample)
http://www.microsoft.com/en-us/download/details.aspx?id=11877

Create/generate style from properties automatically

I have a XAML Markup with multiple lines.
<telerik:RadTileView x:Name="RadTileView"
HorizontalAlignment="Center"
Height="480"
Margin="40"
ColumnWidth="160"
RowHeight="160"
ColumnsCount="4"
RowsCount="3"
MaxRows="3"
IsSelectionEnabled="True"
MaximizeMode="Zero"
SelectionMode="Single"
ItemsSource="{Binding Path=MenuItems}"
SelectedItem="{Binding Path=SelectedItem}"
ContentTemplate="{DynamicResource TileItemDataTemplate}">
Now I am done developing I want to simplify my markup and put the properties into a style.
But then I have to create a new Style and copy and paste each and ever property into it.
Is there an extension or addon to do the work for me?
Blend has (or at least did in Expression Blend) this functionality.
Extract styles in Expression Blend

Binding in WPF Toolkit on Chart Series

it's my first post here so, sorry for my mistakes in advance:). Here is my problem: I am trying to build a WPF application using the MVVM pattern and I'm not ALWAYS able to load data in my chart. The only time when it works is when I use the PieSeries. In the all other cases I receive an error. What is strange is that in my designer window is amable to see my chart.
Here is my code:
<Border Background="White" BorderThickness="2" BorderBrush="Black" Grid.Column="1">
<!--ContentPresenter Content="{Binding Path=FormHost}">
</ContentPresenter-->
<Grid>
<chart:Chart Name="chart1">
<chart:Chart.Series>
<chart:PieSeries Name="series1" ItemsSource="{Binding ChartItems}"
IndependentValueBinding="{Binding Path=Name}"
DependentValueBinding="{Binding Path=Value}"/>
</chart:Chart.Series>
</chart:Chart>
</Grid>
</Border>
In the viewModel I have among other things:
private ObservableCollection<ChartElement> chartItems;
public MainWindowViewModel()
{
chartItems = new ObservableCollection<ChartElement>();
chartItems.Add(new ChartElement("da011111111111", 3));
chartItems.Add(new ChartElement("adas111111", 490));
chartItems.Add(new ChartElement("adas111111", 341));
chartItems.Add(new ChartElement("adas111111", 413));
chartItems.Add(new ChartElement("adas111111", 143));
}
Image with the error
Thank you in advance.
It seems that the problem is in the WPF Toolkit. The bindings above were correct. The problem was that I had specified the xml:lang in my window other than en-US and because of that the application crashed.
For more details please see here and here

Can we place a devexpress ComboBoxEdit control in Bar?

I am looking for some approach that can allow me to put a devexpress ComboBoxEdit control in the Bar.
For example:
<dxb:BarManager x:Name="barManager" CreateStandardLayout="False" Grid.Row="1" Grid.Column="0">
<dxb:BarManager.Items>
<dxb:BarStaticItem Name="lblState" Content="State"/>
<dxb:BarLinkContainerItem Name="cmbStates" >
<dxb:BarLinkContainerItem.Content>
<dxb:ComboBoxEdit DisplayMember="Description" ValueMember="Id" EditValue="{Binding Filter.EquipmentId, Mode=TwoWay}" ItemsSource="{Binding Path=OrderStates, Mode=TwoWay}">
</dxb:ComboBoxEdit>
</dxb:BarLinkContainerItem.Content>
</dxb:BarLinkContainerItem>
</dxb:BarManager.Items>
<dxb:BarManager.Bars>
<dxb:Bar x:Name="Bar" Caption="Bar" UseWholeRow="True">
<dxb:Bar.DockInfo>
<dxb:BarDockInfo ContainerName="Top"/>
</dxb:Bar.DockInfo>
<dxb:Bar.ItemLinks>
<dxb:BarStaticItemLink BarItemName="lblState" />
<dxb:BarLinkContainerItemLink BarItemName="cmbStates" />
</dxb:Bar.ItemLinks>
</dxb:Bar>
</dxb:BarManager.Bars>
</dxb:BarManager>
Doing so results in the following error:
UIElement can't be set as content for a BarItemLink.
Is it possible to achieve this? What are the options to do this?
Please use the following markup:
<dxb:BarEditItem x:Name="barEditItemComboBox" EditValue="{...}">
<dxb:BarEditItem.EditSettings>
<dxe:ComboBoxEditSettings
ItemsSource="{...}"
DisplayMember="{...}"
ValueMember="{...}"
/>
</dxb:BarEditItem.EditSettings>
</dxb:BarEditItem>
Also I suggest you review the following articles:
Items and Links
The List of Bar Items and Links
ComboBoxEdit

Easy way to create a style with only minor changes for a Telerik Control

My project currently has a PieChart with a legend. Due to size restrictions I was asked to make a modification where if you hover over the name in the legend, it would display the full name (in the event that it was partially cut off). This revealed to me the issue that if you want to make a minor functional change in a Telerik control you will have to develop a complete style for it.
I feel like there is no easy answer for this, so I figured I'd ask and see if a smartypants figured something clever out. We use lots of Telerik control so if I could take control of them with something like that without having to completely redo them, it would give me a huge amount of control over my interface's more advanced features.
As a note, we are currently using version 2011.1.315.1040, I tried updating to the newest version today but it seems that they altered a control we use often, so I'd prefer to not have to update unless there is really a benefit since there will be a lot of reworking required.
An example style on telerik's website for what I was attempting to modify can be found here
Here is the piechart we are using as an example.
<telerik:RadChart Name="CoreChart"
VerticalAlignment="Top"
PaletteBrushesUseSolidColors="True"
PaletteBrushesRepeat="True"
BorderBrush="Transparent"
Background="Transparent"
BorderThickness="0">
<telerik:RadChart.PaletteBrushes>
<SolidColorBrush Color="#93d2ff" />
<SolidColorBrush Color="#ce0013" />
</telerik:RadChart.PaletteBrushes>
<telerik:RadChart.SeriesMappings>
<telerik:SeriesMapping>
<telerik:ItemMapping FieldName="Value" DataPointMember="YValue" />
<telerik:ItemMapping FieldName="Title" DataPointMember="LegendLabel" />
<telerik:SeriesMapping.SeriesDefinition>
<telerik:PieSeriesDefinition ShowItemLabels="False"
ShowItemToolTips="True"
ItemToolTipFormat="{Binding ToolTipFormat}">
<telerik:PieSeriesDefinition.InteractivitySettings>
<telerik:InteractivitySettings SelectionMode="Single"
SelectionScope="Item" HoverScope="None"/>
</telerik:PieSeriesDefinition.InteractivitySettings>
</telerik:PieSeriesDefinition>
</telerik:SeriesMapping.SeriesDefinition>
</telerik:SeriesMapping>
</telerik:RadChart.SeriesMappings>
<telerik:RadChart.DefaultView>
<telerik:ChartDefaultView ChartLegendPosition="Right" >
<telerik:ChartDefaultView.ChartArea>
<telerik:ChartArea HorizontalAlignment="Left" LegendName="ChartLegend"
BorderBrush="Transparent" EnableAnimations="True"
Background="Transparent" >
<telerik:ChartArea.AxisX>
<telerik:AxisX AxisLabelsVisibility="Collapsed" />
</telerik:ChartArea.AxisX>
</telerik:ChartArea>
</telerik:ChartDefaultView.ChartArea>
<telerik:ChartDefaultView.ChartLegend >
<telerik:ChartLegend x:Name="ChartLegend" Style="{StaticResource
ChartLegendStyle}" LegendItemMarkerShape="Square" Header=""
BorderThickness="0" Background="Transparent"
BorderBrush="Transparent" Width="150" />
</telerik:ChartDefaultView.ChartLegend>
</telerik:ChartDefaultView>
</telerik:RadChart.DefaultView>
</telerik:RadChart>
The way the control is built, you'll have to have a style with a ControlTemplate for the ChartLegendItem. In the link for Telerik's documentation there is a TextBlock named "PART_TextBlock". Change it to look like this:
<TextBlock x:Name="PART_TextBlock"
Grid.Column="1"
Foreground="{TemplateBinding Foreground}"
Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}"
Text="{TemplateBinding Label}"
TextTrimming="CharacterEllipsis"
ToolTipService.ToolTip="{Binding Text, RelativeSource={RelativeSource Self}}" />
In the instance of ChartLegend
<telerik:ChartLegend x:Name="ChartLegend"
.....
LegendItemStyle="{StaticResource MyLegendItemStyle}" />
This will save you the need for a style of a Legend.
Another tip, to get all default styles of Telerik's controls, go to c:\Program Files (x86)\Telerik\RadControls for Silverlight Q1 2011\Themes - there's a solution there that has all the styles of all the themes.

Resources