So, I have a Windows Phone 8.1 application (Windows Store style) and I'm trying to make a simple 3 column layout. I'm running into the problem though that the controls I put in the smaller columns of the grid do not respect the width of the column. The control instead will be some (I assume) default size that is way too big, unless I manually specify in pixels how wide I want the control to be. I don't want to specify pixels though, since I want this to easily work on different screen sizes.
My XAML code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.15*" />
<ColumnDefinition Width="0.70*" />
<ColumnDefinition Width ="0.15*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="A" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Stretch" FontFamily="Global User Interface" FontSize="40" Width="auto"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="B" VerticalAlignment="Center" Height="576" Width="Auto" TextAlignment="Center" FontSize="206" />
<Button Grid.Column="2" Content="C" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontFamily="Global User Interface" FontSize="40" Height="640" Width="auto"/>
</Grid>
Screenshot showing the overflowing "C" button going beyond the column line of the grid
Funny enough, taking this EXACT same XAML code and putting it in a Windows Phone 8.1 Silverlight application results in it working as I'd expect with the controls being fit to the grid
edit: Actually, even setting widths in pixels has no effect... uhh wat?
Set MinWidth="0" on each of your buttons.
Related
I have two borders in a winwdow, the first one contains a listbox which has size set through margins. So I can change the window size--->the border changes---> the listbox changes. I'd like to know what it's width is but the width property reports Nan while the actualWidth report 0.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Border1" BorderBrush="Gainsboro" BorderThickness="5" CornerRadius="8,8,3,3" Margin="10,10,168.8,10.4" >
<ListBox x:Name="lbButtons" Background="{x:Null}" BorderBrush="{x:Null}" Height="338" Margin="0,0,0.4,0"/>
</Border>
<Border x:Name="Border2" BorderBrush="Gainsboro" BorderThickness="5" CornerRadius="8,8,3,3" Grid.ColumnSpan="2" Margin="263,10,9.2,10" />
</Grid>
This is something valid for each control: how to know its present size when it's not specified?
thanx
It is possible that the component is not yet displayed at the point where you get its size. You can get the right actualWidth in the loaded event of the object.
I am curious about how to create a sidebar navigation something like:
I tried using an uniform grid but there ended up being too much spacing between "buttons" and I'm not sure if it's possible to modify the tab control to act like full width buttons instead of overhead tabs.
Also if if its possible to add icons that would be a huge plus.
You can make a Gridcolumn in your Standard grid with your wished Width. The into this Column you can put a stackpanel which fills your buttons from top to bottom.
Like That:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Button Height="40">Test</Button>
<Button Height="40">Test2</Button>
</StackPanel>
</Grid>
It would look like this:
If i missunderstod you please tell me and im gona edit it.
To add Images you can then create another grid in your Button with two columns: Like this:
<Button>
<Grid Height="40" Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="pack://siteoforigin:,,,/Resources/dll.png"></Image>
<TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">Text</TextBlock>
</Grid>
</Button>
Note that you have to set your grid to Width="200" like you set your main Grid.Column because the Grid would not be the whole width of the button if you would not set it too 200.
Then the List would look like this:
I am still trying to get my head around wpf ui creation. I have created a user control which has a expander, dockpanel and two comboboxes in the dockpanel with equal width hardcoded in xaml. It looks good during the design time and in runtime as long as the expander widths is unchanged. When the expander header is changed to a longer text the dockpanel streches and the two comboxes remain the same size. They are docked to the right hence there is a lot of gap between two comboxes.
My question, is there a way to equally space the two comboboxes in the dockpanel.
Code:
<DockPanel Height="Auto"
DockPanel.Dock="Top"
HorizontalAlignment="Stretch" Name="lhsInput"
VerticalAlignment="Stretch" Width="Auto"
LastChildFill="False">
<ComboBox Height="23" Name="cboLHSItem"
Width="84" FontWeight="Normal"
Margin="1,0,0,0" Foreground="Black" FontFamily="Tahoma" />
<ComboBox Height="23" DockPanel.Dock="Right"
Name="cboLHSValues" Width="79" FontWeight="Normal"
IsEditable="False" Margin="0,0,1,0" FontFamily="Tahoma"
Foreground="Black" />
</DockPanel>
You could use Grid instead of DockPanel, Sample code below:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ComboBox Height="23" Name="cboLHSItem"
MinWidth="79"
Grid.Column="0"
FontWeight="Normal"
Foreground="Black" FontFamily="Tahoma" />
<ComboBox Height="23" MinWidth="79"
Grid.Column="1"
Name="cboLHSValues" FontWeight="Normal"
IsEditable="False" FontFamily="Tahoma"
Foreground="Black" />
</Grid>
DockPanel may be providing the required Width for its Child elements. However, with Grid and its RowDefinitions and ColumnDefinitions you can specify whether you want "Auto" Width/Height or you want to use whatever is available for Width/Height. The above code specifies to use Whatever width available for the Child element by setting Width to * in ColumnDefinition.
UPDATE
To Understand how different Panels of WPF work, refer to MSDN page: Panels Overview
I have an issue with making a custom title bar for a form. It would contain a search textbox aswell as a few sliders, as seen on this image:
Now, imagine that as the title bar - everything that is not a part of the controls themselves (the textbox which is surrounded by a border element, and the slider) needs to be mousedownable for dragging purposes.
I've tried this:
<Grid MouseDown="TitleGridMouseDown">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="135"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Slider Grid.Column="1" Margin="5 15 5 0" Width="100" MouseDown="TitleGridMouseDown"/>
<Slider Grid.Column="2" Margin="5 15 5 0"/>
<Border Grid.Column="3" CornerRadius="10" BorderThickness="1" BorderBrush="White" Width="180" Height="20" Background="White">
<TextBox Background="Transparent" BorderThickness="0" Height="20"/>
</Border>
</Grid>
However it's of no avail. There's a small part between the two sliders, like a few pixel area, which actually works (DragMove(); in the event itself). I don't have an awful lot of experience this type of things in WPF, but it feels to me like the area shrinks to the control. For instance, nothing changes if I place the border object into a button and try to bind the event to the button.
How should I approach this?
Your problem here is that you want to capture the MouseDown event on the grid element. Since your grid has no Background set, its defaulted to null. The MouseDown event does not get raised. Think of it like it is going through the grid without actually hitting it. A Background=Transparent on your top grid should solve the problem.
I want to develope my first real WPF Desktop Application. It's quite a lot of time since my last desktop application, which was developed with .NET 2.0 and Windows Forms. Since i have to develope a new Desktop Application, and i can take the advantage of .NET 4.0 i would really like to use WPF.
I am reading some online tutorial and documentation to choose the right way to do it, but i am a little lost with the new controls.
Basically i need a panel which show some textboxes and label above a datagrid.
Do you think that i can achieve such a result with gridpanel control ?
Thank you.
In WPF you usually use several different controls. Control composition in WPF is a major feature and you'll gain a lot by knowing it and taking advantage of it.
When looking at your screen i divide it in two major parts:
- campi di ricerca
- resultati
For these two i'd use a Grid with two rows and one column.
The ricerca area could use a DockPanel with the header aligned at the top and aother Grid With Fill contents.
... and so on, so on.
My best advice is for you to learn about WPF Composition
Hope i've helped a little bit
Yes, you need to use a Grid, with multiple rows and columns.
See the example on MSDN
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">100000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2">150000</TextBlock>
<TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock>
</Grid>