WPF Control To Imitate HTML Console - c#

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>

Related

Textbox Filling all available space in Grid Row

I'm experiencing a problem with my UI XAML code. The problem is that I can't get my TextBox to fill in all available space in the Grid Row that contains it. I read quite a few posts about similar issues, and the summary of them is "don't use stack panel for this" and "set VerticalAlignment="Stretch"", but this did not work for me. Near the bottom of my XAML you can see the text box that I've been trying to get to stretch to fill the height of the grid row, along with the text box I'm hoping to have work by the end in a comment.
Having VerticalAlignment="Stretch" does not change the behavior of the XAML, and produces a one-line TextBox as if I didn't assign VerticalAlignment="Stretch" at all. This is what the GUI page looks like with or without VerticalAlignment="Stretch":
Here is the respective XAML code.
<ContentControl x:Class="Analytics.Configuration.UI.DataflowTemplateView"
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:ComputersUnlimited.Analytics.Configuration.UI"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:core="http://schemas.cu.net/2011/xaml/presentation/core"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
d:DataContext="{d:DesignInstance local:DataflowTemplateViewModel, IsDesignTimeCreatable=True}">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="Row0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Command="{Binding NavigateToPreviousControlCommand}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,20,0">Back</Button>
<TextBlock Grid.Column="1" Text="M-Code Template Text" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<!--<TextBox Grid.Row="1"
TextWrapping="Wrap"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,6,0,6"
AcceptsReturn="True"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"/>-->
<TextBox Grid.Row="1" VerticalAlignment="Stretch"/>
</Grid>
I've tried all the advice I've ran into with no success. So, if you have any advice, sharing would be appreciated.
Thank you.

Most likely there is an implicit style for TextBox that is setting a default Height. If that's the case, you'll need to set:
Height="NaN"
On your TextBox in order for it to stretch.

C# - How to create a WPF interface with independent splitters on the same column and/or row?

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>

C# WPF Put children of custom control to specific grid

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

How to fill DockPanel With one control

I am tring to have a gridview fill a dockpanel. I have LastChildFill="True" but it still doesnt fill the window. I have a grid on top that holds a label and textbox. Then a dockpanel that I want to fill the rest of the space. and then insode that dock panel, i want the Gridview to fill that space.
Heres what I have:
<Window x:Class="DocumentHandlingTouch.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MultitouchHOL" Height="394" Width="633" WindowState="Maximized"
xmlns:mt="clr-namespace:DocumentHandlingTouch" Icon="/DocumentHandlingTouch;component/1414781821_143818.ico">
<Canvas Name="_canvas">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Replace with your UserControl -->
<Label Canvas.Left="221" Canvas.Top="0" Content="Item #" Height="28" Name="label1" Grid.Column="1" Grid.Row="1" FontWeight="Bold" />
<TextBox Name="TxtItemNumber" Width="220" Grid.Column="2" Grid.Row="1" Background="#FFF5F5CC" />
</Grid>
<DockPanel Canvas.Left="0" Canvas.Top="34" Name="dockPanel1" LastChildFill="True">
<DataGrid AutoGenerateColumns="False" Name="DGVImages" SelectionChanged="DGVImages_SelectionChanged" Height="324" Width="612" />
</DockPanel>
</Canvas>
</Window>

I'm not sure, but maybe better just replace your DockPanel with Grid. Then put your DataGrid in the center of this grid. Set height and width to auto for DataGrid. And I think it would be what you want.

WPF project with Grids

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>

Categories

Resources