I have the following Window created in WPF. This is how it's shown:
I have no idea why the screen is shown so big and I don't know how to debug why is it getting so wide.
This is the code related to the problem:
<Window x:Class="Picis.CpCustomize.CustomizeControls.Dialogs.EditIntegerWindow"
MinWidth="350"
SizeToContent="Height"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ResizeMode="CanResize"
ShowInTaskbar="False"
WindowStartupLocation="CenterScreen"
WindowState="Normal"
Loaded="OnWindowLoaded">
<!-- Main frame -->
<Grid>
<!-- Layout -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" MinWidth="100" TextAlignment="Right">
<TextBlock.Text>
<Binding Converter="{StaticResource Localizer}" ConverterParameter="General.Value" />
</TextBlock.Text>
</TextBlock>
<TextBox x:Name="valueTextBox" Grid.Column="1" Margin="5" Text="{Binding Path=Value}"/>
<TextBlock VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" Visibility="{Binding Path=ShowComments, Converter={StaticResource VisiConv}, ConverterParameter=Collapse}" MinWidth="100" TextAlignment="Right">
<TextBlock.Text>
<Binding Converter="{StaticResource Localizer}" ConverterParameter="EditParamDlg.Comment" />
</TextBlock.Text>
</TextBlock>
<TextBox x:Name="commentTextBox" Grid.Row="1" Grid.Column="1" Margin="5" Visibility="{Binding Path=ShowComments, Converter={StaticResource VisiConv}, ConverterParameter=Collapse}" Text="{Binding Path=Comment}"/>
<CheckBox Grid.Row="2" Grid.Column="1" Margin="5" x:Name="isDeletedCheckBox" Visibility="{Binding Path=ShowIsDeleted, Converter={StaticResource VisiConv}, ConverterParameter=Collapse}"
IsChecked="{Binding Path=IsDeleted}">
<CheckBox.Content>
<Binding Converter="{StaticResource Localizer}" ConverterParameter="EditParamDlg.IsDeleted" />
</CheckBox.Content>
</CheckBox>
<UniformGrid Grid.Row="3" Grid.Column="1" Margin="5" HorizontalAlignment="Right" Columns="2">
<Button x:Name="okButton" Click="OnOk" IsDefault="True">
<Button.Content>
<Binding Converter="{StaticResource Localizer}" ConverterParameter="General.Ok" />
</Button.Content>
</Button>
<Button x:Name="cancelButton" Click="OnCancel" Margin="5,0,0,0" IsCancel="True">
<Button.Content>
<Binding Converter="{StaticResource Localizer}" ConverterParameter="General.Cancel" />
</Button.Content>
</Button>
</UniformGrid>
</Grid>
</Window>
My first question is how to debug this issue, the second one is what is happening in this specific scenario.
Thanks in advance.
This question is a duplicate of: Why are my WPF window sizes defaulting to be huge
And according to: Window Size when SizeToContent is not specified the default size when not specified is 60% of the width and 60% of the height of your primary screen.
You explicitly set the window to stretch in width:
SizeToContent="Height"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
This says, "make the window as wide and tall as possible, but then resize to the content of the height"
If you remove that, and set Width and Height to "Auto" (or leave out), you'll likely get what you want. Try just removing all three of those lines (which will leave out alignment, can cause default Width/Height of "Auto" to be used.)
<Window HorizontalAlignment="Stretch"
that is the problem, I guess.
To me it seems this one:
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
It stratches the window...
The alignments on a window should not really do anything as there is no container to reference, but you only tell the window to contract to the content in height, i would change that behavior to both dimensions:
SizeToContent="WidthAndHeight"
How to debug this sort of thing? Maybe train your brain to be able to parse XAML and do layout on the fly... i know, not very helpful.
Maybe this is filling existing space (like it is supposed to).
<ColumnDefinition Width="*"/>
Related
This question already has an answer here:
How do I place a text over a image in a button in WinRT
(1 answer)
Closed 5 years ago.
I am learning different ways of achieving certain layouts with XAML in UWP (I know I'm late to the party but I just started with the UWP stuff!)
What I am trying to achieve is a main navigation page kind of thing from a hub control on my main page. At every HubSection, I will have button on each column of a 2-column grid, which will contain buttons. Ive'tried something similar to this post but the debugger kept failing to attach to my UWP app when I used images instead of textblocks.
Essentially, what I've got until now is something like this: (I've shared my code down below)
But what I am trying to achieve is each button having its own image background and a separate TextBlock with semi-transparent background at the bottom centre of the button... (I've only photo shopped it, this is the thing I am trying to achieve...)
So this is what I've tried so far... I've also tried the relative panel but no luck...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Center">Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Grid>
My complete code looks something like this for this page.
<Page
x:Class="VaultManager.Terminal.Views.MainPage"
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">
<Grid Background="Black">
<Hub SectionHeaderClick="Hub_SectionHeaderClick">
<Hub.Header>
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="pageTitle" Text="My Hub Sample" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
</Grid>
</Hub.Header>
<HubSection Header="Overview">
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<RelativePanel>
<TextBlock>Column 0 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</RelativePanel>
</Button>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,10,10,10">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 1 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<StackPanel>
<TextBlock>Column 1 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="Videos" Name="Videos">
<!-- yada yada -->
</HubSection>
<HubSection Header="Audios" Name="Audios">
<!-- blah blah -->
</HubSection>
</Hub>
</Grid>
Good job giving us all that info. You may want to take a look here since the asker in that question seems to have had a similar issue. The answerer suggested using a Grid instead of a StackPanel. Hope that helps. After that, you should be able to adjust the transparency of the text. If you are using visual studio you can just click on the text element and adjust the background brush from the Properties tab. The button w/ the image should look like this:
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock Text = "Column 0 Item 1">
<TextBlock.Background>
<SolidColorBrush Color="(**Colour here**)" Opacity = "(**Opacity Here {1 being opaque and 0 being transparent}**)/>
</TextBlock.Background></TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
</Button>
I want to show an accent color chooser like what is built-in in the system.
When It's in full mode, I want it to appear as tiles with available colors, and when it appears as a drop-down list, I want it to appear as a little square and color name next to it.
The problem is that I don't know how to set two templates for full-mode and drop-down mode.
<ComboBox SelectionChanged="AccentColor_SelectionChanged">
<ComboBoxItem>
<ComboBoxItem.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Yellow" Width="20" Height="20"/>
<TextBlock Grid.Column="1" Text="Yellow" />
</Grid>
</ComboBoxItem.Content>
</ComboBoxItem>
<ComboBoxItem>
<ComboBoxItem.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Blue" Width="20" Height="20"/>
<TextBlock Grid.Column="1" Text="Blue" />
</Grid>
</ComboBoxItem.Content>
</ComboBoxItem>
</ComboBox>
This works only for drop down mode. How can I achieve it? (It's a Windows PHone Runtime app).
normally in wp8 when number of items in a dropdownlist becomes more than 5 items it will automatically turns to a full screen mode.else it will show in just a drop list..
In listpicker there is a property call ExpantionMode..try that or following link will help you..
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh868195.aspx
try this..just edit as per your requirement.
I have just pasted my code.
<wpToolkit:ListPicker Name="cmbCountry" Background="#FFF9E2" Foreground="#333333" Grid.Column="0" ExpansionMode="FullScreenOnly" ItemsSource="{Binding Countries}" SelectionChanged="cmbCountry_SelectionChanged_1">
<wpToolkit:ListPicker.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding CountryName}" FontSize="20"></TextBlock>
</DataTemplate>
</wpToolkit:ListPicker.ItemTemplate>
<wpToolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Border BorderBrush="#FFF9E2" BorderThickness="0,0,0,3">
<StackPanel Orientation="Horizontal" Width="425">
<TextBlock Text="{Binding CountryName}" FontSize="35"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</wpToolkit:ListPicker.FullModeItemTemplate>
I searched in stackoverflow, and there is a property FrozenColumnCount for DataGrid, but Grid control doesn't have that property.
We have a Grid with 2 columns. Now, we need to freeze the last column in a grid, and make it always shown in the client area of the user control. otherwise, if the data (such as text) in first column is too long, customer has to use mouse to drag the horizon scroll bar to show the 2nd column.
We want customer can always see the data in 2nd column, so I wonder if we could freeze the specified column.
Update 1: I paste my code for the tree view control.
<HierarchicalDataTemplate x:Uid="HierarchicalDataTemplate_1" x:Key="MyPaletteMyTestTreeCell"
ItemsSource="{Binding Converter={StaticResource MyTestDataAccessor}}"
ItemTemplateSelector="{StaticResource MyTestDataAccessor}">
<ContentControl x:Uid="ContentControl_1" MouseDoubleClick="Item_MouseDoubleClick" ContextMenu="{StaticResource TreeListViewItemContextMenu}" MouseRightButtonDown="MRClick" Focusable="False">
<Grid x:Uid="Grid_2" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Uid="ColumnDefinition_3" />
<ColumnDefinition x:Uid="ColumnDefinition_2" Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Uid="Grid_3" Grid.Column="0">
<StackPanel x:Uid="StackPanel_3" HorizontalAlignment="Left" Orientation="Horizontal">
<pc:ThemedImage x:Uid="Image_4"
LightSource="{Binding CategoryId, Converter={StaticResource LightMyTestIconConverter}, Mode=OneWay}"
DarkSource="{Binding CategoryId, Converter={StaticResource DarkMyTestIconConverter}, Mode=OneWay}"
Width="16" Height="16"
Margin="0,1,0,1"
VerticalAlignment="Center"/>
<TextBlock x:Uid="TextBlock_13" Text="{Binding Name}" VerticalAlignment="Center" Margin="3,0,0,1" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
<Grid x:Uid="Grid_4" Grid.Column="1">
<CheckBox x:Uid="CheckBox_3" HorizontalAlignment="Right" Click="CheckBox_Click" Grid.Column="1" Style="{StaticResource MyPaletteMyTestVisibilityStyle}" ToolTip="On/Off" Focusable="False">
<CheckBox.IsChecked>
<Binding x:Uid="Binding_1" Converter="{StaticResource MyTestDataAccessor}" Path="Visibility" Mode="OneWay">
<Binding.ConverterParameter>
<FrameworkElement x:Uid="FrameworkElement_1" DataContext="{TemplateBinding DataContext}" Tag="Visibility"/>
</Binding.ConverterParameter>
</Binding>
</CheckBox.IsChecked>
<CheckBox.IsEnabled>
<Binding x:Uid="Binding_2" Converter="{StaticResource MyTestDataAccessor}" Path="Visibility" Mode="OneWay">
<Binding.ConverterParameter>
<FrameworkElement x:Uid="FrameworkElement_2" DataContext="{TemplateBinding DataContext}" Tag="Enabled"/>
</Binding.ConverterParameter>
</Binding>
</CheckBox.IsEnabled>
</CheckBox>
</Grid>
</Grid>
</ContentControl>
</HierarchicalDataTemplate>
SOLUTION:
I found the cause. I have specified a horizon scroll bar for it.
So, when I removed it and use the code above, it can work as expected.
thanks a lot.
Clearly, you're not thinking about this correctly. You just need to put the column that you want to 'freeze' into a column of an outer Grid. Try something this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<!-- Your other controls -->
</Grid>
<Grid Grid.Column="1" Name="FrozenColumn">
<!-- Your frozen controls -->
</Grid>
</Grid>
Below is my xaml code :
<Window x:Class="ScoresBank.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<DockPanel LastChildFill="True">
<WrapPanel DockPanel.Dock="Top">
<ToolBar Height="25"></ToolBar>
</WrapPanel>
<WrapPanel DockPanel.Dock="Bottom">
<StatusBar Name="stbBottom" Height="25"
BorderThickness="2"
BorderBrush="Black">Example</StatusBar>
</WrapPanel>
<StackPanel DockPanel.Dock="Left">
<DockPanel LastChildFill="True">
<WrapPanel DockPanel.Dock="Top">
<Button Name="btnBrowseTags">TAGS</Button>
<Button Name="btnBrowseTitles">TITLES</Button>
</WrapPanel>
<ComboBox DockPanel.Dock="Top" Name="cbxCategory">
Example
</ComboBox>
<WrapPanel DockPanel.Dock="Bottom">
<TextBox Name="txtKeyword"></TextBox>
<Button Name="btnFind">Find</Button>
</WrapPanel>
<ListBox Name="lbxBrowse">
</ListBox>
</DockPanel>
</StackPanel>
<StackPanel DockPanel.Dock="Right">
<Button>Example</Button>
</StackPanel>
<Canvas>
</Canvas>
</DockPanel>
And this is my current layout view :
So, what I mean with filling the container are :
Making lbxBrowse to fill the mid-space of the DockPanel inside the left StackPanel.
Making txtKeyword to fill the WrapPanel.
Making stbBottom to fill the WrapPanel.
What I've tried :
It seems i've put them in a DockPanel with LastChildFill="True". But it seems doesn't work.
I don't know about this, since it's not possible to put it into a DockPanel first.
I don't know anything about this.
I don't use fixed size, since I need them to keep neat even when resized in multiple screen resolution. The fixed size on ToolBar and StatusBar seems required, otherwise, the text will be unseen.
P.S. If possible, I prefer the solution to be XAML code, rather than the C# code. Otherwise, C# code is fine too.
Thank you.
You should use a Grid. It is more easier to configure. Here is an example (I don't know exactly how you want to setup your layout).
<Window x:Class="SampleWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Margin="5" Content="TAGS"
Grid.Column="0" Grid.Row="0" />
<Button Margin="5" Content="TITLES"
Grid.Column="1" Grid.Row="0" />
<Button Margin="5" Content="EXAMPLES"
Grid.Column="2" Grid.Row="0"
HorizontalAlignment="Right"/>
<ComboBox Margin="5"
Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" />
<ListBox Margin="5"
Grid.Column="2" Grid.Row="1" Grid.RowSpan="2" />
<Button Margin="5" Content="EXAMPLE"
Grid.Column="2" Grid.Row="3" HorizontalAlignment="Left" />
</Grid>
</Window>
And the result:
With a grid you can set the height and the width of the columns and rows to a specific value (in points, pixels, cm, etc.), to column content (Auto) or proportional to the grid (with *).
Instead of using a StackPanel and DockPanel you can use Grid and set Grid.ColumnDefinitions and Grid.RowDefinitions. You can specify directly each row Height and each column Width. It's easier to use and it automaticly fit to content and container.
I have a DataTemplate for my WPF ListBox:
<DataTemplate DataType="{x:Type local:LogEntry}" x:Key="lineNumberTemplate">
<Grid IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Index" Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Cursor="/LogViewer;component/Template/RightArrow.cur">
<Rectangle Fill="{Binding Path=LineNumbersBackgroundColor, ElementName=LogViewerProperty}" Opacity="0.4" />
<TextBlock Grid.Column="0" Margin="5,0,5,0" Style="{StaticResource MyLineNumberText}" x:Name="txtBoxLineNumbers" />
</Grid>
<TextBlock Grid.Column="1" Margin="5,0,0,0" Style="{StaticResource MyTextEditor}" />
</Grid>
</DataTemplate>
Is it possible that the selection box begins not at the beginning (MyLineNumberText) but at MyTextEditor? Sorry I don't know how to describe it in the right way.
Yes, it is possible. You have to modify the style of the listbox. If you are using Blend this is easy. Otherwise you could get the style for Listbox and ListboxIten here: http://msdn.microsoft.com/en-us/library/cc278062(v=vs.95).aspx
Copy the style to your project and then change the style acordingly.