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:
Related
I have a window that expands to left and to the right.
Simplified example:
<Window x:Class="Application1.Windows.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow"
SizeToContent="Width" Height="250">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!--Expander LEFT-->
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="175" /> <!--Red Content -->
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="Auto"/> <!--Expander RIGHT-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Expander Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="3"
Margin="5"
ExpandDirection="Left">
<Grid Width="200">
</Grid>
</Expander>
<Grid Grid.Column="2"
Grid.RowSpan="3"
Background="Red"/>
<Expander Grid.Column="4"
Grid.Row="0"
Grid.RowSpan="3"
Margin="5"
ExpandDirection="Right">
<Grid Width="200">
</Grid>
</Expander>
</Grid>
Here you can see what the problem is:
I've already had a look on WPF - Expand Window to the Left.
The solution kind of works but that is only solving half of the problem.
How to do that for Left AND Right ?
UPDATE
I do not want the Expander columns to be fixed. They should just show the minimal space needed for the expander
One approach that will work is this:
(But I'm somehow unsatisfied with this solution)
Create an Enum to store the last Action in:
public enum ExpandActions
{
ExpandRight,
ExpandLeft,
CollapsRight,
CollapseLeft
}
Then I added the handlers for Expand & Collapse to my Expanders in xaml.
At last override SizeChanged on the Window as in WPF - Expand Window to the Left.
We only want this behavior, when expanding to left - otherwise we would kill our 'expand-to-right' behavior.
protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
{
if (!sizeInfo.WidthChanged)
{
base.OnRenderSizeChanged(sizeInfo);
return;
}
Hide();
base.OnRenderSizeChanged(sizeInfo);
//Last action was on left expander
if(_lastAction == ExpandActions.CollapseLeft || _lastAction == ExpandActions.ExpandLeft)
{
Left -= (sizeInfo.NewSize.Width - sizeInfo.PreviousSize.Width);
}
Show();
}
Good point about this is that expansion out of screen could be handled.
It works but I guess it's not the best solution.
The result is this:
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.
I want to fetch the positions of controls within a page in windows store apps in pixels.
It would be nice to be able to do it for an arbitrary control, however for the moment just figuring out how to do it for a button would be fine!
I've tried looking at margins, but they seem to often have no relation to the actual position when mechanisms like Grid.Row="x" or HorizontalAlignment="Center" are used in the Xaml or set programatically. I would need this method to work whatever the method of positioning the control is.
Thanks in advance!
EDIT:
I'm testing by setting up a UI:
<Grid x:Name="grid" Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="test" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Content="test"/>
</Grid>
and then modifying the 'Grid.Column', 'Grid.Row' and Alignment characteristics.
You can get position of control using transform object.
<Button x:Name="btn" Content="Button" Margin="131,339,0,391" />
void BlankPage4_Loaded(object sender, RoutedEventArgs e)
{
var trans = test.TransformToVisual(null);
var point = trans.TransformPoint(new Windows.Foundation.Point());
}
I am trying to limit the first column height to match the second one's after rotating the TextBlock.
I have the following XAML:
<Viewbox>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column='1'
Text='Ubuntu'
FontFamily='Ubuntu'
FontSize='36' />
<TextBlock
Grid.Column='0'
Text='Linux'
FontFamily='Ubuntu'
FontSize='36'>
<TextBlock.LayoutTransform>
<RotateTransform
Angle='-90' />
</TextBlock.LayoutTransform>
</TextBlock>
</Grid>
</Viewbox>
Which will render the following:
However, I'm trying to get this output, so that the height of the left column will adapt to that of the second:
Have you got any idea how to do that purely with declarative XAML? Ie. no binding to heights or code-behind. I also do not want to specify any margins of the controls.
Thanks.
Slight modifications in your code can give you what you want:
First: your updated code
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock x:Name="UbuntuBox"
Grid.Column='1'
Text='Ubuntu'
FontFamily='Ubuntu'
FontSize='36' />
<TextBlock Width="{Binding ElementName=UbuntuBox, Path=Height}"
Grid.Column='0'
Text='Linux'
FontFamily='Ubuntu'
>
<TextBlock.LayoutTransform>
<RotateTransform
Angle='-90' />
</TextBlock.LayoutTransform>
</TextBlock>
</Grid>
Second: Explanations
Your TextBlock displaying "Linux" has to be linked to the Ubuntu TextBlock . In this case, its Width must be the same as Ubuntu's Height, so I added the following: Width="{Binding ElementName=UbuntuBox, Path=Height}"
You can't have a TextBlock with a 36 FontSize fitting this given width. Removing it will keep it to default, then you can play with it if you want
And that's all you need! No hardcoded added stuff there =)
This is the best i could come up with. The bad part is the hardcoded row definition, but because you already have the root grid inside a viewbox, its relative, so it shouldn't be a big problem.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="36"/>
</Grid.RowDefinitions>
<TextBlock
Grid.Column='1'
Text='Ubuntu'
FontFamily='Ubuntu'
FontSize='36' />
<Viewbox Grid.Column='0'>
<TextBlock
Text='Linux'
FontFamily='Ubuntu'
FontSize='36'>
<TextBlock.LayoutTransform>
<RotateTransform
Angle='-90' />
</TextBlock.LayoutTransform>
</TextBlock>
</Viewbox>
</Grid>
How to create global seek bar for audio player in WP7?I want create something like this
Add the necessary controls to the application frame, rather than a/each page.
In app.xaml add something like this:
<Application.RootVisual>
<phone:PhoneApplicationFrame x:Name="RootFrame"
Navigated="CompleteInitializePhoneApplication"
NavigationFailed="RootFrame_NavigationFailed">
<phone:PhoneApplicationFrame.Template>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="700"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="ClientArea">
<ContentPresenter />
</Grid>
<Grid Grid.Row="0">
// your controls here
</Grid>
</Grid>
</ControlTemplate>
</phone:PhoneApplicationFrame.Template>
</phone:PhoneApplicationFrame>
</Application.RootVisual>