I'm developing Windows Store App with using Caliburn Micro.
In one of the pages I have ContentControl, which display UserControl. In UserControl I have GridView. My question is: How to set UserControl.Width same as ContentControl.Width? Note: whet set UserControl.Width=Auto - width the same as GridView.Width
in page.xaml
<ContentControl x:Name="ActiveItem" />
in usercontrol.xaml
<UserControl
x:Class="Test.Views.GroupView"
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" Width="Auto" Height="Auto">
<Grid Margin="0,20">
<GridView x:Name="Groups" Margin="0" />
</Grid>
</UserControl>
UPDATE
Adding
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
To UserControl doesn't solve the problem.
Figured this out after a lot of trial and error:
<ContentControl Name="MyContent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
The key is to use the Horizontal/Vertical*Content*Alignment property (not the Horizontal/VerticalAlignment properties).
Here is what you should do when problem like your's appears.
Try to set ContentControl's Background property to some disturbing color. For example Purple or Pink. And also set Background property on your UserControl for example Green. It will allow you to see where exactly is your ContentControl and where is UserControl. If you can't see any Green you can tell that content of UserControl is stretched to fill whole UserControl.
Try to set UserControl's VerticalAlignment and HorizontalAlignment properties to Stretch. FrameworkElement.HorizontalAlignment, VerticalAlignment
Note: In order to let these work. You can't explicitly set Width and Height on your UserControl.
Try to set ContentControl's VerticalContentAlignment and HorizontalContentAlignment to Stretch. Control.HorizontalContentAlignment, VerticalContentAlignment . These stretches the child element to fill the allocated layout space of the parent element.
If you still see some Purple or Pink then something's wrong again :) you can check Margin/Padding MSDN
If it's still messed up. Then I don't know how else can I help you. Last possible solution would be binding. And I am not sure if it works.
<UserControl
Width="{Binding RelativeSource=
{RelativeSource FindAncestor,
AncestorType={x:Type ContentControl}},
Path=ActualWidth}"
Height="{Binding RelativeSource=
{RelativeSource FindAncestor,
AncestorType={x:Type ContentControl}},
Path=ActualHeight}">
...
</UserControl>
I hope something helps. I believe you that it could be really annoying problem.
Especially for #AlexeiMalashkevich
I solve it with using binding like this:
In root Page you have:
<ContentControl x:Name="ActiveItem"/>
Then add the child page:
<Page
Height="{Binding ActualHeight, ElementName=ActiveItem}"
Width="{Binding ActualWidth, ElementName=ActiveItem}"
......
/>
And that's all.
You should be able to bind UserControl's width to the ContentControl's ActualWidth.
<local:MyUserControl1 Height="50" Width="{Binding ElementName=contentControl, Path=ActualWidth}"/>
Here is some sample code:
<Page
x:Class="stofUserControlWidth.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:stofUserControlWidth"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Cyan"/>
<ContentControl Grid.Column="1" x:Name="contentControl">
<local:MyUserControl1 Height="50" Width="{Binding ElementName=contentControl, Path=ActualWidth}"/>
</ContentControl>
</Grid>
</Page>
Here is MyUserControl1.xaml code:
<UserControl
x:Class="stofUserControlWidth.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:stofUserControlWidth"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid Background="Magenta">
</Grid>
</UserControl>
Hope this helps!
For me this is working:
<UserControl
...
Height="{Binding ActualHeight,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentControl}}}">
...
</UserControl>
You have to make sure that your ContentControl has the desired size.
For example my ContentControl look like this: It is always fill the whole size of the window. And the size of the UserControl in the ContentControl dinamically changes as well.
<Grid>
<ContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding StartViewModel}" Name="ContentArea" />
</Grid>
Related
I want to create a new UserControl and reroute the Background property to use it elsewhere than in the UserControl.Background property (like it is done on the checkbox for example).
Here is a simple custom usercontrol:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Controls"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
x:Class="Controls.HexagonalTile"
mc:Ignorable="d" d:DesignWidth="300" d:DesignHeight="300">
<Grid>
<ed:RegularPolygon Fill="{Binding ElementName=LayoutRoot, Path=Background}" StrokeThickness="5" Stroke="Black"/>
</Grid>
And I want to use it like this:
<Controls:HexagonalTile HorizontalAlignment="Left" Height="100" Width="100" Background="Aqua" />
But when I do this, the corner of my user control, outside of the hexagone, take the background color too. I want them to stay transparent.
Thank's for your help.
The reason why this is happening is because the default ControlTemplate for a UserControl has a Border with a TemplateBinding to the Background property.
However, you can re-template the control like this to achieve your goal:
<UserControl x:Class="WpfApp4.HexagonalTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing">
<UserControl.Template>
<ControlTemplate TargetType="{x:Type UserControl}">
<Grid>
<ContentPresenter />
</Grid>
</ControlTemplate>
</UserControl.Template>
<Grid>
<ed:RegularPolygon
Fill="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
Stroke="Black"
StrokeThickness="5" />
</Grid>
</UserControl>
I hope this helps!
I have created main window in this window created dockpanel for binding user control value in main window like as below,
<Window x:Class="WpfApplication2.DMMainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ResizeMode="NoResize"
WindowState="Maximized"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
Height="{Binding SystemParameters.PrimaryScreenHeight}"
Width="{Binding SystemParameters.PrimaryScreenWidth}">
<DockPanel Width="1254" Height="1200" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="mainPanel" VerticalAlignment="Top" />
</Window>
In this code you can see given width and height for dockpanel. I need this height and width need to bind as same as window width. I have used actual width and height and also sizetocontent but nothing happened as expected. Please give your suggestion.
As you are using dock panel you do not need to set it explicitly. Incase you want , you can restrict further by using minimum height and width, but no mandatory.
<Window x:Class="WpfApplication2.DMMainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ResizeMode="NoResize"
WindowState="Maximized"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
Height="{Binding SystemParameters.PrimaryScreenHeight}"
Width="{Binding SystemParameters.PrimaryScreenWidth}">
<DockPanel x:Name="mainPanel"
MinHeight ="{Binding SystemParameters.PrimaryScreenHeight}"
MinWidth ="{Binding SystemParameters.PrimaryScreenWidth}" />
</Window>
You can add Stretch property as below,
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" x:Name="mainPanel" />
Hope it will work
<Window x:Class="WpfApplication2.DMMainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ResizeMode="NoResize"
WindowState="Maximized"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
Height="{Binding SystemParameters.PrimaryScreenHeight}"
Width="{Binding SystemParameters.PrimaryScreenWidth}">
<DockPanel x:Name="mainPanel" />
</Window>
I'm trying to add a static image inside a RichTextBox based on the selection of a ListBox item. I'm able to achieve the functionality of loading the image but the image doesn't occupy the entire size of the RichTextBox. I looked at MSDN documentation for any property I could set but couldn't find any that suits my need.
I've posted a sample code snippet to add an image to a RichTextBox.
<Window x:Class="ImageDepth.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<RichTextBox HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="100" BorderBrush="Gray">
<FlowDocument>
<BlockUIContainer>
<Image Source="C:\Temp\Penguins.jpg"/>
</BlockUIContainer>
</FlowDocument>
</RichTextBox>
</Grid>
Am I missing something here or is there a simpler way to achieve this?
Edit: I tried setting the Height and Width of the Image to that of the RichTextBox but it covers about 80% of the RichTextBox. Also, I had to remove the Stretch property of the Image since it distorts the image slightly even though setting the property makes the image cover about 90% of the area.
You have to bind Height and Width of Image to ActualHeight and ActualWidth of RichTextBox.
<Image Source="C:\Temp\Penguins.jpg"
Width="{Binding ActualWidth, RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType=RichTextBox}}"
Height="{Binding ActualHeight, RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType=RichTextBox}}"/>
UPDATE
There seems internal padding of RichTextBox. You can set that to negative value to remove that padding.
<RichTexBox Padding="-5,-2,-5,-2"> // It reads Left, Top, Right, Bottom
....
</RichTexBox>
Change -5,-2,-5,-2 to desired value which seems fit for you.
Try this:
<Window x:Class="ImageDepth.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<RichTextBox HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="100" BorderBrush="Gray">
<FlowDocument>
<BlockUIContainer>
<Image Height="100" Width="100" Source="C:\Temp\Penguins.jpg" Stretch="Fill"/>
</BlockUIContainer>
</FlowDocument>
</RichTextBox>
</Grid>
This will tell your image to fill the entire RichTextBox.
How to create a hovered toolbar?
Clicking to expand the ToolBar will not shrink the Canvas.
Expander works for expanding, but the canvas will get shrinked.
<UserControl x:Class="smartgrid.studio.View.GraphicEditorView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:model="clr-namespace:smartgrid.studio.Model"
xmlns:studio="clr-namespace:smartgrid.studio"
xmlns:metro="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
mc:Ignorable="d"
d:DesignHeight="1000" d:DesignWidth="1000">
<DockPanel>
<Expander DockPanel.Dock="left" Header ="Toolbar" FontSize="18" ExpandDirection="Up">
<TreeView Name="GraphicEditorEntityTree" Background="Transparent" BorderBrush="Transparent" ItemsSource="{Binding GraphicEditorEntities}"/>
</Expander>
<Canvas/>
</DockPanel>
</UserControl>
You can overlay things by putting them in a Grid without rows or columns, the sizing of your toolbar is an independent matter (you can still use an expander for that).
http://msdn.microsoft.com/en-us/library/system.windows.controls.panel.zindex.aspx
Panel.ZIndex might be the solution.
<Grid x:Name="LayoutRoot">
<Grid x:Name="Toolbar" Panel.ZIndex="1000" Visibility="Collapsed">
</Grid>
<canvas />
</Grid>
I'm trying to set the FontSize -- amoung other things -- on some control's within a UserControl to the UserControl-level FontSize. This is not working:
<UserControl x:Class="TestWpfApplication1.Scratch.UserControlFontSizeProp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock
FontSize="{Binding RelativeSource={RelativeSource self},Path=FontSize}">
Text
</TextBlock>
</Grid>
</UserControl>
What am I doing wrong? Thanks.
Think this should work..
<TextBlock FontSize="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=FontSize}" />