Develop Reference

Route event to element under the current element

I've been trying to have one canvas with two layers. One layer scrolls horizontally, the second one is on top and scrolls vertically.
In the second layer (the one that scrolls vertically), I stacked a transparent grid (or panel) and a panel with information so that we can see the first layer that is under this one and if we scroll up, we have the information that appears on the screen.
That works like a charm except that if I scroll horizontally, the first layer (the one under) does not scroll at all. It's not a problem if the vertical scrolls does not scroll if we swipe the transparent grid.
This is my xaml
<Canvas x:Name="Canvas">
<local:MyPage x:Name="PageContainer"/> <!--This one scrolls horizontally -->
<ScrollViewer
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Hidden"
Height="{Binding ActualHeight, ElementName=UcRoot}">
<!--This one scrolls vertically and appears on top -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1">
</Grid>
</Grid>
</ScrollViewer>
</Canvas>
I tried many things on the transparent grid (setting width to 1, removing it and setting the information grid margin top to 1200 for example) but the grid captures the event and does not relay to my page.
Can I get some help?
Thanks!

You have to set the background to 'Transparent' to the grid in order to be able to tap on it and swipe.. and you maybe need these properties to play with:
ScrollViewer.VerticalScrollMode
ScrollViewer.HorizontalScrollMode
Although, this is my suggested solutions:
<ScrollViewer ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollMode="Disabled" >
<Grid >
<TextBlock Text="contnet" />
</Grid>
</ScrollViewer>
<ScrollViewer ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled" >
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" Background="Transparent" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Canvas>

WPF Grid Column width in DataTemplate does not work

I have DataWindow and UserControls (different ViewModels).
My DataWindow.Xaml:
<catel:DataWindow.Resources>
<DataTemplate DataType="{x:Type viewmodels:MessageViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Views:MessageView Grid.Column="1"/>
</Grid>
</DataTemplate>
</catel:DataWindow.Resources>
<ItemsControl ItemsSource="{Binding Messages}">
My UserControl: MessageView.Xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="Red">
</Border>
<Border Grid.Row="1">
...
Content
...
</Border>
</Grid>
Messages : ObservableCollection<ViewModelBase>();
My content in UserControl adds to DataWindow dynamically at runtime. If content width in UserControl is more than WindowWidth ColumnWidth (column1 20* and column2 80*) does not work. I see only Grid.Column(80*) and it's width is 100*. What am I doing wrong?
Thanks for help!

It's impossible render an element 80% of windows when its size is more than windows size.
for solving this problem you can make windows size dynamic by removing Windows Width attribute in your code.

Using multiple frame in a wpf window

I'm developing an application using WPF by c#.
I have 2 frames next to each other. The above will not change and just updated(like Facebook toolbar).
The bottom frame will change by clicking on some buttons. (it is something like masterpage in ASP).
I don't want to set a height and width for window or for frames. The problem is when I make the window full screen there is a space between two frames.
However none of the vertical/horizontal alignment stretch does not work.
<window>
<Frame VerticalAlignment="Top" Background="Crimson" />
<Frame VerticalAlignment="Bottom" Background="Black"
/>
</Window>
I want to create something like the this site as you see. the notify section and the main page.
EDIT:
i can put them next to each other just by set the height, but when i make full the window the heights stay and the yellow space becomes appear, so i want to find a way to put them Exactly next to each other in every window size.

As Mitch noted in the comments, you could place the two frames in a grid instead, and let the grid size the items.
<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>
</Window>

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>

Is it possible to add hyperlink to WPF Window title?

I am just wondering if it is possible to add hyperlink to WPF window title and if it is possible what is the best way of doing that.
I want to have title like that:
Program name, Version and that link to my site (e.g http://mysite.com)

This isn't supported out-of-the-box.
However, you can use Control Template to achive this or create an entire custom window of your own.
you can create a control template for your window. Something like that :
<Window.Template>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0">
<Hyperlink NavigateUri="http://mysite.com">
My Program, version 1
</Hyperlink>
</TextBlock>
<!-- Implement your own control box control -->
<ContentPresenter />
</Grid>
</ControlTemplate>
</Window.Template>
You'll also have to set the window's Style to None as follows:
WindowStyle="None"
This will also mean that you'll have to implement your own controlBox with minimize, maximize and close buttons.
Check out this links for further information:
http://www.codeproject.com/Articles/140267/Create-Custom-Windows-in-WPF-with-Ease
http://blog.magnusmontin.net/2013/03/16/how-to-create-a-custom-window-in-wpf/
Good luck

Legend outside the plot

do you know how can I put the Legend outside the plot area?
(Both in code and in xaml)
Thank you for your help!
cis

There is no implementation in the current D3 library to move the legend outside the plotter. The most that can be done is to move the legend to a different place in the plotter by editing the Legend.xaml.cs file in the source code. You will have to change the dependency properties in the code-behind to move the legend around the area of your plotter.
If you want to put your legend outside the plotter, you will have to recreate the Legend.xaml to make it independent of the plotter, but still receive the same information it needs to create the legend. If you do manage to do that, please post it here as an answer!

Maybe the answer came a little late, but I also ran into this problem.
This is the style of Microsoft.Research.DynamicDataDisplay.Plotter.cs:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Microsoft.Research.DynamicDataDisplay"
xmlns:common="clr-namespace:Microsoft.Research.DynamicDataDisplay.Common">
<Style x:Key="defaultPlotterStyle" TargetType="{x:Type local:Plotter}">
<Setter Property="Control.Background" Value="White"/>
<Setter Property="Control.BorderBrush" Value="Black"/>
</Style>
<ControlTemplate x:Key="defaultPlotterTemplate" TargetType="{x:Type local:Plotter}">
<common:NotifyingGrid Name="PART_ContentsGrid" Background="{TemplateBinding Control.Background}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<common:NotifyingStackPanel Name="PART_HeaderPanel" Orientation="Vertical" Grid.Row="0"/>
<common:NotifyingGrid Name="PART_MainGrid" Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<common:NotifyingGrid Name="PART_CentralGrid" Column="1" Row="1" ClipToBounds="true" Background="Transparent"/>
<common:NotifyingCanvas Name="PART_MainCanvas" Grid.Column="1" Grid.Row="1" ClipToBounds="true"/>
<Rectangle Name="PART_ContentBorderRectangle" Grid.Column="1" Grid.Row="1"
Stroke="{TemplateBinding Control.BorderBrush}"
StrokeThickness="{TemplateBinding Control.BorderThickness}"/>
<common:NotifyingStackPanel Name="PART_LeftPanel" Grid.Column="0" Grid.Row="1" Orientation="Horizontal"/>
<common:NotifyingStackPanel Name="PART_RightPanel" Grid.Column="2" Grid.Row="1" Orientation="Horizontal"/>
<common:NotifyingStackPanel Name="PART_BottomPanel" Grid.Column="1" Grid.Row="2" Orientation="Vertical"/>
<common:NotifyingStackPanel Name="PART_TopPanel" Grid.Column="1" Grid.Row="0" Orientation="Vertical"/>
</common:NotifyingGrid>
<common:NotifyingCanvas Name="PART_ParallelCanvas" Grid.Column="1" Grid.Row="1"/>
<common:NotifyingStackPanel Name="PART_FooterPanel" Orientation="Vertical" Grid.Row="2"/>
</common:NotifyingGrid>
</ControlTemplate>
</ResourceDictionary>
So, the trick is you have to modify the legend's parent and its parent properties, to move the desired elements to the right place in the right size.
PART_CentralGrid element contains the Legend item.
I did the following:
legendGrandparent.Width = plotter.Width - 100;
legendGrandparent.HorizontalAlignment = HorizontalAlignment.Left;
legendParent.ClipToBounds = false;
legend.LegendLeft = plotter.Width - 125;
where legendGrandparent is the PART_MainGrid and legendParent is the PART_CentralGrid.
Before:
After: