I have a grid which its columns are centred aligned. For example every image that is on a cell in this grid, is centred on its cell. There is nothing in grid definition that sets this .
The grid definition is as follow:
<Grid Canvas.Left="16" Canvas.Top="229" Visibility="{Binding Status,
Converter={StaticResource EnumToVisibilityConverter},
ConverterParameter='OK,Processing'}" IsEnabled="{Binding Status,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter='OK'}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Source="image1.png" Stretch="Fill" Width="111" Height="20" />
<Image Grid.Column="0" Grid.Row="1" Source="image2.png" Width="49" Height="17"/>
</Grid>
Both of the above images are centred aligned.
I checked parent canvas and there is nothing there to dictate that it should be centred.
Is there a way that I set the alignment of a grid column to left?
Is there any tools that I can see where the property of each component is set? (Similar to what developer toolbar do for CCS and HTML)
You could set the HorizontalAlignment of the Image to the Left if you need, as I'm pretty sure Center is the default alignment.
<Image HorizontalAlignment="Left" ......
Related
I've got a problem with WPF/XAML. I can't figure out how to let the left Grid (with a centered image inside and backgroud color) grow its height, depending on the autogenerated height on the datagrid on the right.
They both are presented in a global grid. If I set a fixed height on the corresponding row, the autogenerated datagrid shows a cruel vertical line, depending on the fixed row-height I set before.
layout with row-height on auto
layout with fixed row-height, but with ugly line at the bottom
<!--ElementR0C1-->
<Grid Name="test">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--Width ElementsC1-->
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="500"/>
</Grid.ColumnDefinitions>
<!--START-->
<Label Grid.Row="0" Grid.Column="0" Style="{StaticResource L1}" VerticalAlignment="Top">Process</Label>
<Grid Grid.Row="1" Grid.Column="0" Background="DDDDDD">
<Image Margin="0,30,0,0" Height="64" Width="64" Source="../../Resources/ok.png" Name="imgJobs" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<DataGrid x:Name="grdJobs" Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" Width="500">
-- some stuff here
</DataGrid>
</Grid>
I do not understand if it's a bug that I'm causing some with wrong setting or simply a problem of WPF.
I'm trying to see all content of a GroupBox and I'm using the Viewbox as some label without viewBox for a certain resolution are not visible.
Everything works fine, but it seems there is something wrong with the rendering.
As seen from the image:
by setting this in viewBox:
<Viewbox Stretch = "Fill" Grid.Column = "0" Grid.Row = "0" StretchDirection = "Both">
I can see all content but as you can see the labels are blurred and seem to spread so forced, I do not like.
In the other groupbox I tried to set this:
<Viewbox Stretch="Uniform" Grid.Column="1" Grid.Row="0" StretchDirection="Both">
and I get a nicer effect already at the level of rendering:
the problem is that they remain of the white bands on the right and left (if obviously imposed the minimum resolution reached by the software) and this for me is not nice because I do not use all the UI application.
For those wishing to take a quick look at the complete XAML:
<Viewbox Stretch="Uniform" Grid.Column="1" Grid.Row="0" StretchDirection="Both">
<GroupBox x:Name="Ospite_Analisi" Header="Ospite">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Label>Inserire scudetto</Label>
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
<StackPanel Orientation="Vertical">
<Label>Nome Squadra</Label>
<Label>Nazione</Label>
<Label>Campionato</Label>
</StackPanel>
</Grid>
<Grid Grid.Column="2" Grid.Row="0" Grid.RowSpan="2">
<Label>Inserire controllo forma</Label>
</Grid>
<StackPanel Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Center">
<Label>Vittorie casa</Label>
<Label>Vittorie fuori</Label>
</StackPanel>
<Grid Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3">
<DataGrid>
...
</DataGrid>
</Grid>
</Grid>
</GroupBox>
</Viewbox>
What I want to achieve is this:
-Fix Both GroupBox in maximum width (the minimum resolution) in viewBox without losing quality and without making it seem forced rendering. How can I achieve this?
Here is the code for Textbox available in my window(form1.xaml),My requirement is when i am resizing my window i want to resize the textbox width also, How can i able to achieve this....
<TextBox Width="500" HorizontalAlignment="Left" Margin="5,0,0,5" TextWrapping="Wrap" AcceptsReturn="True" Text="{Binding Result,UpdateSourceTrigger=PropertyChanged,ValidatesOnDataErrors=True}" IsEnabled="{Binding OpenMode,Converter={StaticResource EnableModeConverter}}" Height="70" />
In WPF you typically place TextBox control within layout Grid control and set the ColumnDefinition Width property of that Grid cell to some relative value "*", so it will resize with the Window. Do NOT use a fixed Width="500" as per your sample: also, remove that "HorizontalAlignment="Left" (the default value is HorizontalAlignment="Stretch", so you can just omit it to simplify your XAML). See the following sample code snippet:
<Grid Name="Grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<TextBox Name="TextBox1" Grid.Row="0" Grid.Column="0" Height="70" Margin="5,0,0,5" TextWrapping="Wrap" AcceptsReturn="True" (...Rest of Your code) />
</Grid>
Note: The same technique could be applied to a vertical "Height" property in case you need to make it also resizable.
Hope this will help. Best regards,
Set HorizontalAlignment to Stretch, and don't set the Width
<Grid>
<TextBox HorizontalAlignment="Stretch"
Margin="5,0,0,5"
TextWrapping="Wrap"
AcceptsReturn="True"
Height="70" />
</Grid>
Layout in WPF is heavily depend on the parent container. For example, create a form with labels and input fields, consider using a Grid panel. Controls in WPF by default resize according to the layout behavior of their parent. Here is an example of a window with two labeled text boxes and two buttons that resize along with the window.
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Contact Name" Grid.Row="0" Grid.Column="0" />
<TextBox Grid.Row="0" Grid.Column="1" />
<Label Content="Contact Location" Grid.Row="1" Grid.Column="0" />
<TextBox Grid.Row="1" Grid.Column="1" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1">
<Button Content="OK" Width="75" Height="24" Margin="3" />
<Button Content="Cancel" Width="75" Height="24" Margin="3" />
</StackPanel>
</Grid>
</Window>
i'm new to wpf .
i got a wpf button ,
in it i need to place 2 elements a textblock and a viewbox encapsulating a canvas
the problem is i can't seem to see the canvas at all , unless i give it static values for its size
<Button Margin="10,30,10,10" Padding="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Viewbox Margin="0,0,0,5">
<Canvas Background="red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1" >
<Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Black" StrokeThickness="4" ></Ellipse>
</Canvas>
</Viewbox>
</Grid>
</Button>
iv'e also attempted this using a stack panel with an horizontal orintation
in any case the canvas does not show
any thoughts of what i'm doing wrong ?
thanks.
Attached Grid properties only work when at the Grid-child-level, i.e. the properties set on the canvas do not take effect they should be set on the container, the ViewBox which is a direct child of the Grid.
Viewboxes only work if the content has a concrete size, you probably need neither the ViewBox nor the Canvas. If you want the Ellipse to be a circle set Stretch="Uniform"
The contents of Buttons do not stretch by default you should set HorizontalContentAligment and its vertical counterpart to Stretch.
e.g.
<Button Margin="10,30,10,10" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Ellipse Stretch="Uniform" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="Black" StrokeThickness="4"></Ellipse>
</Grid>
</Button>
I have Border control defined like so:
<Border Background="Azure" Grid.Row="2">
<ContentControl Width="Auto" Height="Auto" Regions:RegionManager.RegionName="MainContent" />
</Border>
I can see Azure background in whole area
Now I inject my view into this ContentControl (it's PRISM). View looks like this..
<toolkit:BusyIndicator IsBusy="{Binding IsBusy}">
<Grid Margin="10" DataContext="{Binding}"
infBehaviors:RegionPopupBehaviors.CreatePopupRegionWithName="ViewPopup"
infBehaviors:RegionPopupBehaviors.ContainerWindowStyle="{StaticResource PopupStyle}">
<!--Define rows in a grid-->
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Define columns in a grid-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Now when I place new UserCOntrol on top of my Grid - I expect it to cover whole "Azure" area. But I only see overlay with size of my data entry form. It seems that second grid does not "fill" ContentControl - only takes as much space as needed. How do I force it to fill? I set Auto column and row - thinking they will stretch but no..
EDIT:
Screenshot from Silverlight Spy.. It shows that ContentControl from Shell covers whole area but grid inside totally ignores my "*" sizes. Also it does work in design mode - it stretches to whole design area...
Make sure you have HorizontalContentAlignment and VerticalContentAlignment of the ContentControl set to Stretch. ^_^
e.g.
<Border Background="Azure" Grid.Row="2">
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Width="Auto" Height="Auto" Regions:RegionManager.RegionName="MainContent" />
</Border>