I write an XAML application and I have a problem with the size of text. How can I make the texts look complete but with the same size? (make it responsive).
This is a small example of my XAML code:
<!-- (0, 0) Availability -->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox Stretch="Uniform">
<Grid Grid.Column="0">
<TextBlock Style="{StaticResource OeeText}">Disponibilidad</TextBlock>
</Grid>
</Viewbox>
<Grid Grid.Column="1">
<TextBlock Style="{StaticResource OeeValues}">100%</TextBlock>
</Grid>
</Grid>
In the Window App, the text shows as:
How can I make all three texts look the same size?
Thanks )
You may define the size of a textBox in a responsive manner using the ViewBox Component but you have to use it inside the grid , in order to wrap the textBox Control
<Viewbox Stretch="Uniform" MaxWidth="200" MaxHeight="200" MinWidth="100" MinHeight="100">
<TextBox x:Name="MyTextBox" />
</Viewbox>
You may also control the size by setting its max/min of width and height as mentioned in the docs
Related
I have StackPanel in which I wrapped 7 Rectangles all varying widths.
My First rectangle in the Stack, I have a Min and Max width defined and one of the other Rectangles (see below x:Name="ToBeCollapsed") that is Collapsed by default, BUT is made visible in a certain condition in the C#.
My issue is that the first Rectangle does not stretch to the MAX width if the rectangle "ToBeCollasped" is collapsed. My thought was that the first rectangle would fill the space to the MAX of "755" if the collapsed rectangle was collapsed.
Am I wrong in my logic?
My layout is below:
<StackPanel x:Name="RectangleColumns" Width="1840" Orientation="Horizontal">
<Rectangle MinWidth="575" MaxWidth="755" />
<Rectangle Width="315"/>
<Rectangle Width="180" />
<Rectangle Width="180"/>
<!--If collapsed first rectangle should grow to 755. MinWidth + 180-->
<Rectangle x:Name="ToBeCollapsed" Width="180"/>
<Rectangle Width="220"/>
<Rectangle Width="190"/>
</StackPanel>
A grid with column definitions set properly will do the trick. I've tried this myself using some fill colours and smaller widths to demonstrate the point, that first column grows into the space when the fifth column collapses:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="RectangleColumns" HorizontalAlignment="Stretch ">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" MaxWidth="400"/>
<ColumnDefinition MaxWidth="50"/>
<ColumnDefinition MaxWidth="50"/>
<ColumnDefinition MaxWidth="50"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MaxWidth="50"/>
<ColumnDefinition MaxWidth="50"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Aqua" MinWidth="200" MaxWidth="400" />
<Rectangle Grid.Column="1" Fill="Blue" Width="50"/>
<Rectangle Grid.Column="2" Fill="Aqua" Width="50" />
<Rectangle Grid.Column="3" Fill="Blue" Width="50"/>
<Rectangle Grid.Column="4" Fill="Pink" Width="300" Name="toBeCollapsed"/>
<Rectangle Grid.Column="5" Fill="Aqua" Width="50"/>
<Rectangle Grid.Column="6" Fill="Blue" Width="50"/>
</Grid>
<Button Grid.Row="1" Content="Toggle Visibility" Name="ButtonToggle" />
</Grid>
Code-behind, just to demonstrate:
public MainWindow()
{
InitializeComponent();
ButtonToggle.Click += ButtonToggleOnClick;
}
private void ButtonToggleOnClick(object sender, RoutedEventArgs routedEventArgs)
{
toBeCollapsed.Visibility = toBeCollapsed.Visibility == Visibility.Collapsed
? Visibility.Visible
: Visibility.Collapsed;
}
Always look behind the schene:
In WPF, every LayoutControl is a Grid - or reproducable with a Grid - but it uses different Column or Row definitions and Alignment.
Stackpanel is a Grid which contains following setup (Horizontal):
Columndefinition for every added controls with Auto size
All added Child controls HorizontalAligment is Center
Additional Columndefinition with * Width
And that's the way the cookies cramble.
Auto sizing distributes space based on the size of the content that is within a column or row.
Which is usually the smallest possible size :/
So +1 for #Bradley Uffner
Use a Grid where Columndefinition of Min/Max Rectangle is *.
I have defined two columns with separator like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<ScrollViewer Name="sideBar" Margin="{StaticResource SplitLeft}" SizeChanged="ScrollViewer_SizeChanged">
<StackPanel>
<TextBlock Text="LEFT CONTENT" Style="{StaticResource Heading2}" />
<TextBlock Text="" Name="ShowThings"/>
</StackPanel>
</ScrollViewer>
<GridSplitter Grid.Column="1" />
<ScrollViewer Name="ListPage" Grid.Column="2 " Margin="{StaticResource SplitRight}" SizeChanged="ScrollViewer_SizeChanged">
<StackPanel>
<TextBlock Text="RIGHT CONTENT" Style="{StaticResource Heading2}" />
<TextBlock Text="Content goes here" />
</StackPanel>
</ScrollViewer>
so the page is divided in 1:2 proportions. but if user wants to resize it, he can. I want to persist the modified width in app settings to be used for next launch.
on size change event I am storing the new width in settings,
Properties.Settings.Default[((ScrollViewer)sender).Name + "Width"] = e.NewSize.Width;
Properties.Settings.Default.Save();
and in window constructor loading the settings and setting the values.
sideBar.Width = (double)Properties.Settings.Default["sideBarWidth"];
but this does not work. can anyone help me identify the problem? I am sure this is a duplicate question, but I don't know what to search for.
It doesn't make sense to set the Width of your sideBar if it is depending on the size given in the Grid.ColumnDefinitions. Try to set the ColumnDefinition.Width:
// 0 = first column
grid.ColumnDefinitions[0].Width = new GridLength((double)Properties.Settings.Default["sideBarWidth"]);
I have a WPF application which checks for new images in a certain parent directory, and if there are new images, it switches the currently displayed images (I have 6 images).
I would like to add a feature which will allow a user to click on one of the images, and upon that click, a 'new' window will appear, showing that image enlarged, and another click anywhere on the screen will quit this enlargement and put the focus back to the other (6) images.
Is that possible? I tried googling zoom image wpf but found only mouse-drag related solutions.
I also tried using viewport but that didn't to work so well either.
Update - XAML
<Grid Grid.Row="0">
<GroupBox x:Name="AccuracyGraphsGroupBox" Header="Accuracy" Foreground="Red">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPicBox" MouseUp="AccuracyPicBox_OnMouseUp"></Image>
<Image Grid.Column="1" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPerioPicBox" MouseUp="AccuracyPerioPicBox_OnMouseUp"></Image>
</Grid>
</GroupBox>
</Grid>
As the guys mentioned in the comments, your best bet is to use a ToolTip to popup your full size image. There is a slight problem with data binding the Image.Source value from the original Image in your ToolTip, because they are not part of the normal UI visual tree and exist in their own tree. However, we can overcome this by using the ToolTip.PlacementTarget property:
<Image Name="Image" Source="/WpfApplication1;component/Images/Tulips.jpg" Height="100"
Stretch="Uniform">
<Image.ToolTip>
<ToolTip DataContext="{Binding PlacementTarget,
RelativeSource={RelativeSource Self}}">
<Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5">
<Image Source="{Binding Source}" Stretch="None" />
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
Of course, you could just use the same Binding Path in both Image.Source properties, but I never like repeating code.
I have a WPF application. To make the full screen visible on all screen sizes, I have implemented MinHeight, MinWidth & HorizontalAlignment="Stretch" VerticalAlignment="Stretch" in Window & Containers too. I am facing some problems when the app runs on Lower Resolution screens. The window gets cut from the right side of the screen - this doesn't show Min, Max, Close btns also on top right.
If I add layout code in then the window is proper in all resolutions, but it makes blank space above the Menubar and below end. On removing , their is no space and all is well, but right side gets cut in Low Resolution screens. And with ViewBox, space above and below the layout. My XML code is like follows :
CODE UPDATED
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- MENU BAR -->
<Menu Grid.Row="0" x:Name="myMnus" VerticalAlignment="Top" Cursor="Hand" HorizontalAlignment="Stretch" IsMainMenu="True" Grid.ColumnSpan="2">
.............
</Menu>
<ToolBarTray HorizontalAlignment="Stretch" Background="White" Margin="0,19,114,0" VerticalAlignment="Top" Grid.ColumnSpan="2" >
..............
<ToolBarTray>
<TabControl Grid.Row="1" Name="tabControl1" HorizontalAlignment="Left" Margin="0,3,0,0" VerticalAlignment="Top"
TabStripPlacement="Bottom" Grid.RowSpan="2" BorderThickness="4,25,4,1" FontSize="13">
</TabControl>
<TabControl Grid.Row="2" Name="tabControl4" HorizontalAlignment="Left" Margin="0,323,0,0" VerticalAlignment="Stretch"
TabStripPlacement="Bottom" BorderThickness="4,25,4,1" FontSize="13" Background="White" Width="227">
</TabControl>
<TabControl TabStripPlacement="Bottom" MinHeight="415" MinWidth="480" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" Name="tabChildContainer" Margin="227,3,207,0" BorderThickness="4,25,4,1" Grid.RowSpan="2" >
</TabControl>
</Grid>
I thought by using Stretch in HorizontalAlignment and VerticalAlignment along with MinWidth and MinHeight, that it would occupy all available space horizontally and Vertically. But tabChildContainer TabControl doesn't go to the right end corner which it should go based on the code.
This is where your problem starts:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="762.976"/>
<ColumnDefinition Width="751.024"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
Anytime that you set exact pixel sizes in your UI, you're asking for exactly these kinds of problems. Setting exact sizes for sections of your application was more of a WinForms thing... WPF has numerous controls that can resize your content for you... you're using one, the Grid... just incorrectly.
Secondly, it is very unusual to use a ViewBox on your whole UI... it is not going to help you. Your best bet is to simply remove it and all of your hard-coded dimensions and make full use of the "*" and "Auto" values in your Grid. When the controls resize themselves (or a Grid resizes them) in this way, it really doesn't matter what resolution a user is using.
I have a xaml code:
<Grid>
<WrapPanel>
<TextBox ></TextBox>
<Button Content="GetIt" />
</WrapPanel>
</Grid>
How i can to get all available space for textBox?
i want to do something like that:
|[____________________][GetIt]|
There are a number of ways this can be achieved, including this one:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox />
<Button Grid.Column="1">GetIt</Button>
</Grid>
Try this:
<Grid>
<TextBox HorizontalAlignment="Stretch" Margin="2,2,102,2"></TextBox>
<Button HorizontalAlignment="Right" Width="100" Content="GetIt" />
</Grid>
Just make the button the desired width and the text box will fill up the rest.
Thanks for the catch; corrected above to properly handle margin on right. This does, however, require you to update the margin when the button width changes. Two columns is a better solution if you plan to change the spacing often. Using the margin is cleaner if you have several controls in the grid and don't want to create nested grids to handle this kind of split.
The simplest way is to use a DockPanel instead of a Grid (the default for LastChildFill is true but I also added it here for clarity):
<DockPanel LastChildFill="True">
<Button Content="GetIt" DockPanel.Dock="Right" />
<TextBox ></TextBox>
</DockPanel>
Here's a way to achieve the layout that you're looking for:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="2"/>
</Style>
</Page.Resources>
<DockPanel>
<DockPanel DockPanel.Dock="Top">
<!-- Because the Button is fixed in size, you can divide the row it's
in using a DockPanel: the Button is docked to the right edge, and the
TextBox fills up the remaining available space. -->
<Button Margin="2" Padding="2" DockPanel.Dock="Right">GetIt</Button>
<TextBox />
</DockPanel>
<!-- Because the TextBoxes *aren't* fixed in size, you can't use docking,
as it won't size them. So put them in a Grid and use star sizing to
divide the grid's vertical space into two equal parts. The Grid will
fill up the remainder of the (outer) DockPanel. -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0">Another TextBox</TextBox>
<TextBox Grid.Row="1">Yet another TextBox</TextBox>
</Grid>
</DockPanel>
</Page>