How to add Window border to usercontrol in WPF?
Use a relative source binding:
BorderBrush="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=BorderBrush}"
You can use a Border tag to get window border to your usercontrol, like this:
<UserControl x:Class="WpfApplication1.UserControl1" ------->
<Border Width="310" CornerRadius="5" BorderBrush="LightBlue" BorderThickness="1">
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="File" Grid.Column="0" Height="22" Grid.Row="0" ></Label>
<Button Content="Browse..." Grid.Column="1" Grid.Row="0" Height="25" Width="70" HorizontalAlignment="Right" Margin="1,1,5,1" SnapsToDevicePixels="True"></Button>
</Grid>
</Border>
</UserControl>
You can use user control as content of a window .
you can set more property of window if you like
Window w = new Window() {Content=new **YourUserControlHere**,Width=400,Height =400,... };
w.ShowDialog();
CheckHere
Related
Is it possible to position the tapitem like this:
Child (Content) should span over grid but the parent (TapItem) shouldnt do this.
I tried it as following.
<Grid Grid.Column="1" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" x:Name="PropertyBarWidth"/>
<ColumnDefinition Width="10*" x:Name="DrawingAreaWidth"/>
<ColumnDefinition Width="1*" x:Name="LibraryWidth"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Grid.ColumnSpan="3" Grid.RowSpan="2" x:Name="OpenDrawings" Background="{StaticResource B_drawingarea}" BorderThickness="0">
<TabItem Header="Test" Grid.Column="1" Grid.RowSpan="1" Grid.Row="0" Style="{StaticResource TabItemStyle}">
<local:UserControl1></local:UserControl1>
</TabItem>
</TabControl>
<Rectangle Grid.RowSpan="2" Fill="{StaticResource B_propertybar}"/>
<GridSplitter Grid.Row="0" Grid.RowSpan="2" Height="100" Width="20"/>
<Rectangle Grid.RowSpan="2" Grid.Column="2" Fill="{StaticResource B_propertybar}"/>
</Grid>
The problem here is, that the gridsplitter shouldn't move the content of the tabitem. But the left and right areas should move with the tapitem itself.
Maybe someone can help, thanks!
What you are trying to achieve looks more feasible with a Docking control than with a simple Grid splitter, just use the Xceed AvalonDock control, don't waste your time reinventing the wheel ;}:
<Window ...
xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
Title="MainWindow" Height="600" Width="1024">
<Grid>
<xcad:DockingManager BorderThickness="1">
<xcad:LayoutRoot x:Name="LayoutRoot">
<xcad:LayoutPanel Orientation="Horizontal">
<xcad:LayoutAnchorablePane IsMaximized="True" >
<xcad:LayoutAnchorable ContentId="MainTab" Title="MainTab" CanHide="False" CanClose="False"
AutoHideWidth="240">
<Grid>
<Border Background="LightSalmon"/>
<!--your main panel with the drawing usercontrol-->
</Grid>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorablePane>
</xcad:LayoutPanel>
<xcad:LayoutRoot.LeftSide>
<xcad:LayoutAnchorSide>
<xcad:LayoutAnchorGroup>
<xcad:LayoutAnchorable Title="LeftSideTools" ContentId="LeftSide">
<Grid>
<Border Background="LightSalmon"/>
<!--your left panel tools-->
</Grid>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorGroup>
</xcad:LayoutAnchorSide>
</xcad:LayoutRoot.LeftSide>
<xcad:LayoutRoot.RightSide>
<xcad:LayoutAnchorSide>
<xcad:LayoutAnchorGroup>
<xcad:LayoutAnchorable Title="RightSideTools" ContentId="RightSide">
<Grid>
<Border Background="LightSalmon"/>
<!--your right panel tools-->
</Grid>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorGroup>
</xcad:LayoutAnchorSide>
</xcad:LayoutRoot.RightSide>
</xcad:LayoutRoot>
</xcad:DockingManager>
</Grid>
Here is the package nugget.
I have a simple layout and am trying to put in a flyout to use as a user input screen. Here's the xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
<Button Content="Add New Task" Command="{Binding NewTaskCommand}" Margin="{StaticResource CenteredToolMargin}"/>
<Button Content="Archive Tasks" Command="{Binding ArchiveTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
<Button Content="Complete Tasks" Command="{Binding CompleteTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
</StackPanel>
<Controls:Flyout Header="Flyout" Position="Right" Width="200" IsOpen="True">
<Controls:FlyoutsControl>
<TextBlock FontSize="24">Hello World</TextBlock>
</Controls:FlyoutsControl>
</Controls:Flyout>
</Grid>
The problem is, the flyout appears to the left of column 1 instead of on top of it. When I close the flyout, it animates over column 1, though. I tried swapping the "Controls:Flyout" and "Controls:FlyoutsControl" tags as I can't find consistent guidance on which way they should go, but it acts the same, either way. Am I missing something?
I set the Column 1 Width to Auto if you want your fixed width than in Flyout add this line Grid.Column="0" Grid.ColumnSpan="2" and remove Grid.Column="1"
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
<Button Content="Add New Task" />
<Button Content="Archive Tasks" />
<Button Content="Complete Tasks" />
</StackPanel>
<Controls:Flyout Grid.Column="1" Header="Flyout" Position="Right" Width="200" IsOpen="True">
<Controls:FlyoutsControl>
<TextBlock FontSize="24">Hello World</TextBlock>
</Controls:FlyoutsControl>
</Controls:Flyout>
</Grid>
I have a button and Popup window with a ListBox. The data source and button commands I take from the ViewModel. I need a few more of these buttons with other sources for the ListBox and other VM buttons command. How do I reuse this code without Ctr+C Ctrl+V ? How to create Control/Data template for this Popup?
<Window x:Class="WpfApplication2.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<StackPanel Margin="10">
<ToggleButton Content="Districts..." x:Name="DistrictButton"/>
<Popup IsOpen="{Binding IsChecked, ElementName=DistrictButton}" PlacementTarget="{Binding ElementName=DistrictButton}" StaysOpen="True">
<Border BorderThickness="1" Background="White" Padding="10">
<Grid Width="400" Height="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Grid.ColumnSpan="4" ItemsSource="{Binding FilterModel.Districts}"/>
<Button Grid.Row="1" Content="Select all" Margin="0,10,0,0" Command="{Binding SelectAllDistrictsCommand}"/>
<Button Grid.Row="1" Grid.Column="2" Content="OK" Margin="0,10,0,0" Command="{Binding OKDistrictsCommand}"/>
<Button Grid.Row="1" Grid.Column="3" Content="Cancel" Margin="5,10,0,0" Command="{Binding CancelDistrictsCommand}"/>
</Grid>
</Border>
</Popup>
</StackPanel>
<!-- Popup again with another DataSource -->
</Grid>
I want to make a popup which has a person's details on it. Each detail will be stacked vertically in the popup. I have two questions.
(1) How should I deal (graphically) with details which are not available?
(2) How to make the container around all the details dynamic so that its height is determined by the number of details available.
My first thought was the following;
<StackPanel Width="400"
Height="500">
<StackPanel x:Name="sp">
<Grid x:Name="spTelephone" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="1"
Margin="5,0,0,0">
<TextBlock Text="+Some Phone No."
VerticalAlignment="Center"
FontFamily="Verdana"/>
</Grid>
<Grid Grid.Column="2">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="3">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
</Grid>
<Grid x:Name="spMobile" Height="50">
<!-- Repeat of above -->
</Grid>
<Grid x:Name="spEmail" Height="50">
<!-- Repeat of above -->
</Grid>
<!-- Further Grids -->
</StackPanel>
</StackPanel>
The idea being that if a detail is not available then I would set the Visibility property of the GRID to Visibility.Collapsed.
For example see my image with 3 details.
Then if a cell phone is not available it would look like this.
So how should I do this? I could for imagine using a ListView as well maybe as this would then take away the need to collapse the views. I could add each detail to an Item. But then how do I get the list view and its parent to resize its height?
Define datatemplate for item and use any items control to represent them.
Simple solution would be something like this:
Template
<DataTemplate x:Key="MyItemTemplate">
<Grid x:Name="spTelephone" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="1"
Margin="5,0,0,0">
<TextBlock Text="+Some Phone No."
VerticalAlignment="Center"
FontFamily="Verdana"/>
</Grid>
<Grid Grid.Column="2">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="3">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
</Grid>
</DataTemplate>
Control
<Border BorderBrush="Black" BorderThickness="2" VerticalAlignment="Center" HorizontalAlignment="Center">
<ItemsControl ItemsSource="{Binding ItemsCollection}"
ItemTemplate="{StaticResource MyItemTemplate}"/>
</Border>
Of course you must fill collection from dataContext and for Text="+Some Phone No." also use data binding from current collection item.(Use DataContext={Binding} in template)
Border here is just to show that ItemsControl size changes according to collection-items count. Also ItemsControl can be replaced with any of it's descendants.
There is DockPanel with three child controls placed side by side in a horizontal manner:
1) TreeView
2) RichTextBox
3) Grid
RichTextBox lies in middle of TreeView and Grid. I made RichTextBox the last child of DockPanel and set LastChildFill attribute to True. Now since Grid can be closed at run time, I want the RichTextBox to occupy all the space that became empty after the Grid is closed. But if the Grid is again shown the RichTextBox should contract from Right hand side to allow the Grid to fit in. How to achieve this? I'm new to WPF. Also, how to hide the Grid? Here is the XAML.
<DockPanel Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True">
<Border BorderThickness="1" DockPanel.Dock="Left" Height="Auto" HorizontalAlignment="Stretch" Margin="1" VerticalAlignment="Stretch" Width="Auto" CornerRadius="0" BorderBrush="#FF646464">
<TreeView Name="TV" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
<Border Name="Notification_Pane" BorderThickness="1" DockPanel.Dock="Right" Height="Auto" HorizontalAlignment="Stretch" Margin="1" VerticalAlignment="Stretch" Width="Auto" CornerRadius="0" BorderBrush="#FF646464">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="Notification" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="LemonChiffon" Grid.Row="0" Grid.Column="0"/>
<Button Name="btn_Close" Content="X" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LemonChiffon" Height="Auto" Width="Auto" Grid.Row="0" Grid.Column="1" Padding="10,0,10,0" BorderThickness="0" Cursor="Hand" Focusable="True" IsHitTestVisible="True" ClickMode="Release" Click="Button_Click" />
<ScrollViewer Height="Auto" Name="ScrollViewer" Width="Auto" Margin="0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
<StackPanel CanVerticallyScroll="True" Height="Auto" Name="Notification_Panel" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</StackPanel>
</ScrollViewer>
</Grid>
</Border>
<Border BorderThickness="1" Height="Auto" HorizontalAlignment="Stretch" Margin="1" VerticalAlignment="Stretch" Width="Auto" CornerRadius="0" BorderBrush="#FF646464">
<RichTextBox Name="rtb" Height="Auto" Width="Auto" Grid.Row="2" HorizontalAlignment="Stretch" Grid.Column="1" Margin="0" />
</Border>
</DockPanel>
You can use Grid.Visibility property to show and hide the grid.
The following code should do the job:
private void Button_Click(object sender, RoutedEventArgs e) //X Button click event.
{
//grid is the name of our Grid Control we want to hide.
grid.Visibility = System.Windows.Visibility.Collapsed;
}
to show the grid again you should use the following code:
grid.Visibility = System.Windows.Visibility.Visible;
The RichTextBox control will always fit in the DockPanel Control.