I have some question in wpf and user control creating.
I have simple Menu control which includes Grid, Image(0 Column) and TextBlock(1 Column).
The promlem Im stucked with is how to put all children of my control to another grid near parent control.
This is demo code of user control:
<UserControl x:Name="userControl" x:Class="Yo.Controls.mItem"
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="50" d:DesignWidth="400">
<Grid x:Name="m_Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ActualHeight, ElementName=userControl, Mode=OneWay}"/>
<ColumnDefinition/>
<ColumnDefinition Width="305"/>
</Grid.ColumnDefinitions>
<Image x:Name="img" Grid.Column="0"/>
<TextBlock x:Name="txt" Grid.Column="2"/>
<Grid x:Name="sub_Grid" Visibility="Hidden" Background="#78000000" Margin="-450,0,50,0" MouseLeftButtonUp="img_Check" MouseEnter="grid_Enter" MouseLeave="grid_Leave"/>
</Grid>
Where sub_Grid is the place where children must be placed.
<Controls:mItem Grid.Row="0" Text="Some txt" IsCheckable="False">
<Controls:mItem Text="Its Child" IsCheckable="False"/>
</Controls:mItem>
So this code will place Control with Text Its Child to sub_Grid
I believe you should nest the controls within subGrid and then define columns for the sub grid. I am going on a wimp here by suggesting the following because I don't entirely understand your question:
<Grid x:Name="m_Grid" Background="Red">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
<ColumnDefinition Width="305"/>
</Grid.ColumnDefinitions>
<Grid x:Name="sub_Grid" Background="Blue" Margin="0,0,50,0"
MouseLeftButtonUp="img_Check" MouseEnter="grid_Enter" MouseLeave="grid_Leave" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image x:Name="img" Grid.Column="0"/>
<TextBlock x:Name="txt" Grid.Column="2"/>
</Grid>
</Grid
Related
I have the following control:
Which is defined by the following code:
<UserControl x:Class="VariantMeshEditor.Views.EditorViews.Util.BrowsableItemView"
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:common="clr-namespace:CommonDialogs.Common;assembly=CommonDialogs"
mc:Ignorable="d"
x:Name="self">
<UserControl.Resources>
<common:BoolToVisibilityConverter x:Key="BoolToHiddenConverter" TrueValue="Visible" FalseValue="Collapsed" />
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="50" Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Content="{Binding LabelName, ElementName=self}" Width="{Binding LabelLength, ElementName=self}"/>
<Label Grid.Column="1">:</Label>
<CheckBox Grid.Column="2" x:Name="CheckBox" Visibility="Collapsed" VerticalAlignment="Center"></CheckBox>
<Border x:Name="b" Grid.Column="3"/>
<TextBox Grid.Column="3" IsReadOnly="{Binding PathTextReadOnly, ElementName=self}" TextWrapping="NoWrap" VerticalAlignment="Center" Text="{Binding PathText, ElementName=self}" Width="{Binding ActualWidth, ElementName=b}"/>
<Button Grid.Column="4" Visibility="{Binding DisplayRemoveButton, ElementName=self, Converter={StaticResource BoolToHiddenConverter}}" Command="{Binding Remove, ElementName=self}" CommandParameter="{Binding}" DockPanel.Dock="Right" Width="50" >Remove</Button>
<Button Grid.Column="5" Visibility="{Binding DisplayBrowseButton, ElementName=self, Converter={StaticResource BoolToHiddenConverter}}" Command="{Binding Browse, ElementName=self}" CommandParameter="{Binding}" DockPanel.Dock="Right" Width="50" >Browse</Button>
<Button Grid.Column="6" Visibility="{Binding DisplayPreviewButton, ElementName=self, Converter={StaticResource BoolToHiddenConverter}}" Command="{Binding Preview, ElementName=self}" CommandParameter="{Binding}" DockPanel.Dock="Right" Width="50" >Preview</Button>
</Grid>
</UserControl>
My problem is that when I expand the control where this control is used and then make is smaller again, the TextBox does not get smaller. Any idea on how to resolve this? I want to label to always be fixed to the left side and the buttons to the right with the Texbox occupying whatever is left.
Normal:
Expanded:
Made smaller again:
The XAML you've posted doesn't have anything obviously wrong, and seems to work fine. I created a minimal example that doesn't have any bindings or code that we don't have access to, this is below. If you paste this into a clean WPF App you'll see it expands and shrinks without problem.
This means the problem is likely to be in code that you haven't shared somewhere (or I'm just missing it). If you can modify this example to show the issue someone may be able to help you.
<Window x:Class="WpfApp1.MainWindow"
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" Height="450" Width="800">
<DockPanel>
<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"
mc:Ignorable="d"
x:Name="self">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="50" Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Content="Label" Width="40"/>
<Label Grid.Column="1">:</Label>
<CheckBox Grid.Column="2" x:Name="CheckBox" Visibility="Collapsed" VerticalAlignment="Center"></CheckBox>
<Border x:Name="b" Grid.Column="3"/>
<TextBox Grid.Column="3" IsReadOnly="False" TextWrapping="NoWrap" VerticalAlignment="Center" Text="Type here"/>
<Button Grid.Column="4" DockPanel.Dock="Right" Width="50" >Remove</Button>
<Button Grid.Column="5" DockPanel.Dock="Right" Width="50" >Browse</Button>
<Button Grid.Column="6" DockPanel.Dock="Right" Width="50" >Preview</Button>
</Grid>
</UserControl>
</DockPanel>
</Window>
I'm completely novice with the Visual Studio 2019 WPF interfaces, but I need to create a demo project for my job, in order to determine if we will migrate to a such technology in the future.
To determine that, I decided to mimic the main interface of one of our existing application, created with the Embarcadero RAD Studio compilers. This application is mainly divided into 4 distinct parts, as follow:
Now I want to add splitters between each part, in a such manner they may be resized, the ones independently of others. For example, I want the top splitter to resize the left top and right top panels, but without resizing the left bottom and right bottom ones.
To create the above interface I wrote the following xaml content:
<Window x:Class="WPFApp.MainWindow"
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"
xmlns:local="clr-namespace:WPFApp"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="53*"/>
</Grid.RowDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left Top</TextBlock>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Row="2">Left Bottom</TextBlock>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Column="2">Right Top</TextBlock>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Column="2" Grid.Row="2">Right Bottom</TextBlock>
<GridSplitter x:Name="MainHorzSplitterTop" HorizontalAlignment="Stretch" Width="5" Grid.Column="1"/>
<GridSplitter x:Name="MainHorzSplitterBottom" HorizontalAlignment="Stretch" Width="5" Grid.Column="1" Grid.Row="2"/>
<GridSplitter x:Name="MainVertSplitterLeft" HorizontalAlignment="Stretch" Height="5" Grid.Row="1"/>
<GridSplitter x:Name="MainVertSplitterRight" HorizontalAlignment="Stretch" Height="5" Grid.Row="1" Grid.Column="2"/>
</Grid>
</Window>
However, when I move e.g the top splitter, the bottom splitter moves together, and the bottom part is resized. How can I modify my code to get the behavior I want?
You could do this by having a grid inside a grid.
So your first grid only consists of three rows. The first would contain a grid with three columns for your two textblocks and a gridsplitter. The second row would be the splitter to resize your two rows. The third would contain another grid with the same setup as for your first row.
It would look like this:
<Window x:Class="Splitted.MainWindow"
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"
xmlns:local="clr-namespace:SplitterProject"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="30*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="53*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<TextBlock>Top left</TextBlock>
<GridSplitter VerticalAlignment="Stretch" Width="5" Grid.Column="1"/>
<TextBlock Grid.Column="2">Top right</TextBlock>
</Grid>
<GridSplitter HorizontalAlignment="Stretch" Height="5" Grid.Row="1"/>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<TextBlock>Bottom left</TextBlock>
<GridSplitter VerticalAlignment="Stretch" Width="5" Grid.Column="1"/>
<TextBlock Grid.Column="2">Bottom right</TextBlock>
</Grid>
</Grid>
You can then resize the top and bottom row independently:
<Window x:Class="SAMPLE.Panels.GridSplitterSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
`<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center"
TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center"
VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>
</Window>
I'm guessing there's not a control that does this automatically, but I'm looking for a way to implement something like this in a wpf application. Here's what I'd like for it to do.
Take commands into it like a cli (This could be a separate text box
if necessary).
Output normal text and support HTML colors.
History that scrolls up as your cursor moves down after each command.
HTML formatted divs, tables, and text formatting (no js needed)
Small images no larger than 100x100
How do I start making this? Do I start with a StackPanel?
I Added two rows with four colomns in a grid panel
In the first row fourth colomn add a stackpanel for normal text
Out side the grid you also add image as well as inside
That I include for your reference
The grid is nested in the scroll
<Window x:Class="Wpftest.MainWindow"
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"
xmlns:local="clr-namespace:Wpftest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<ScrollViewer Margin="5" CanContentScroll="False"
HorizontalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="Augustus.jpg" Height="100" Margin="10"/>
<Label Grid.Column="1" Content="Augustus - 63BC - 14AD" />
<Image Grid.Column="2" Source="Tiberius.jpg" Height="100" Margin="10"/>
<Label Grid.Column="3" Content="Tiberius - 42BC - 37AD"/>
<StackPanel Grid.Row="0" Grid.Column="4">
<TextBlock FontSize="15">Your Normal text</TextBlock>
</StackPanel>
<Button Grid.Row="1" Content="Learn"
HorizontalAlignment="Center" VerticalAlignment="Center"
Padding="10,5"/>
<Button Grid.Row="1" Grid.Column="2" Content="Learn"
HorizontalAlignment="Center" VerticalAlignment="Center"
Padding="10,5"/>
<Button Grid.Row="1" Grid.Column="4" Content="Inputs"
HorizontalAlignment="Center" VerticalAlignment="Center"
Padding="10,5"/>
</Grid>
</ScrollViewer>
</Window>
I'm trying to implement an expander in WPF which in side there are some nested controls. One of these is a Wrap Panel which i'd like to wrap as the user changes the window size.
This works if i take the Grid Control parent of the WrapPanel out and put it in its own App but not in this format. As i'm not using minimum width for this Grid it suprises me why it doesnt wrap. Any ideas? Thanks
<Window x:Class="WpfApplication5.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" FontFamily="Calibri" FontSize="8">
<StackPanel Orientation="Vertical">
<Expander Margin="3" Padding="3">
<Expander.Header>
<StackPanel Orientation="Horizontal" MinWidth="150" Width="Auto" MinHeight="25">
<Label MinWidth="50">Label 1</Label>
<CheckBox VerticalAlignment="Center"></CheckBox>
<Border></Border>
<Label>Label 2</Label>
</StackPanel>
</Expander.Header>
<Expander.Content>
<StackPanel Orientation="Horizontal" >
<Label MinWidth="150">Add Image</Label>
<Grid Name="Grid1" ShowGridLines="True" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Name="Title1" MinHeight="25"></RowDefinition>
<RowDefinition Name="Number1" MinHeight="25"></RowDefinition>
<RowDefinition Name="PlaneA" MinHeight="25"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="Plane1" MinWidth="25" Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="PlaneCheckBox" MinWidth="25" Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="Border1" MinWidth="25" Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="List1" Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<WrapPanel Grid.Row="2" Grid.Column="3" Orientation="Horizontal" VerticalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" VerticalAlignment="Center"></CheckBox>
<Label Grid.Column="1">No. 1</Label>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" VerticalAlignment="Center"></CheckBox>
<Label Grid.Column="1">No. 1</Label>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" VerticalAlignment="Center"></CheckBox>
<Label Grid.Column="1">No. 1</Label>
</Grid>
</WrapPanel>
</Grid>
</StackPanel>
</Expander.Content>
</Expander>
</StackPanel>
StackPanel has an infinite size in the orientation direction. so when using a WrapPanel inside a StackPanel you must limit the size of the StackPanel in that direction. Grid has a finite size on the other hand, so you can see your content wrapping.
I have this Windows app:
<Window x:Class="PlayTube.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="800" Width="1400">
<Grid Background="#FFD86F6F">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Height="70" Background="#FF9A9A9A">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Height="25" Width="200" Name="SearchTextBox" />
<Button Grid.Column="2" Height="25" Width="80" Content="Search" Click="Button_Click" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MaxWidth="250" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="300" MaxWidth="350"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Background="#FFFFFF89">
</Grid>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC" />
<Grid Background="#FF05BECB" Grid.Column="2">
</Grid>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="3" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Grid Background="#FF4E04A7" Grid.Column="4">
<MediaElement Stretch="Fill" />
</Grid>
</Grid>
</Grid>
As you can see i have 3 Grids and i want to know if it possible the every grid will be managed from a class, because i dont want that all the logic will be in this main Windows class.
Right click on your project select the Add sub menu and then select user control, you should get this dialog.
Give the control a name and click ok
build your project and look in the toolbox, you should see right at the top that the new user control you added will be there.
drag this item in to the content of your grid and it should set everything up for you.
afer doing this my window now looks like
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:UserControl1 HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>
</Grid>
</Window>