I am trying to limit the first column height to match the second one's after rotating the TextBlock.
I have the following XAML:
<Viewbox>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column='1'
Text='Ubuntu'
FontFamily='Ubuntu'
FontSize='36' />
<TextBlock
Grid.Column='0'
Text='Linux'
FontFamily='Ubuntu'
FontSize='36'>
<TextBlock.LayoutTransform>
<RotateTransform
Angle='-90' />
</TextBlock.LayoutTransform>
</TextBlock>
</Grid>
</Viewbox>
Which will render the following:
However, I'm trying to get this output, so that the height of the left column will adapt to that of the second:
Have you got any idea how to do that purely with declarative XAML? Ie. no binding to heights or code-behind. I also do not want to specify any margins of the controls.
Thanks.
Slight modifications in your code can give you what you want:
First: your updated code
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock x:Name="UbuntuBox"
Grid.Column='1'
Text='Ubuntu'
FontFamily='Ubuntu'
FontSize='36' />
<TextBlock Width="{Binding ElementName=UbuntuBox, Path=Height}"
Grid.Column='0'
Text='Linux'
FontFamily='Ubuntu'
>
<TextBlock.LayoutTransform>
<RotateTransform
Angle='-90' />
</TextBlock.LayoutTransform>
</TextBlock>
</Grid>
Second: Explanations
Your TextBlock displaying "Linux" has to be linked to the Ubuntu TextBlock . In this case, its Width must be the same as Ubuntu's Height, so I added the following: Width="{Binding ElementName=UbuntuBox, Path=Height}"
You can't have a TextBlock with a 36 FontSize fitting this given width. Removing it will keep it to default, then you can play with it if you want
And that's all you need! No hardcoded added stuff there =)
This is the best i could come up with. The bad part is the hardcoded row definition, but because you already have the root grid inside a viewbox, its relative, so it shouldn't be a big problem.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="36"/>
</Grid.RowDefinitions>
<TextBlock
Grid.Column='1'
Text='Ubuntu'
FontFamily='Ubuntu'
FontSize='36' />
<Viewbox Grid.Column='0'>
<TextBlock
Text='Linux'
FontFamily='Ubuntu'
FontSize='36'>
<TextBlock.LayoutTransform>
<RotateTransform
Angle='-90' />
</TextBlock.LayoutTransform>
</TextBlock>
</Viewbox>
</Grid>
Related
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
My goal is to save a GridSplitter position for later recall. The splitter is inside a Grid control that has three columns defined thusly:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding GridPanelWidth, Mode=TwoWay}" />
<ColumnDefinition Width="3" /> <!--splitter itself is in this column-->
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
The property GridPanelWidth is defined this way in the view model:
private GridLength _gridPanelWidth = new GridLength(1, GridUnitType.Star);
public GridLength GridPanelWidth
{
get { return _gridPanelWidth; }
set
{
if (_gridPanelWidth != value)
SetProperty(ref _gridPanelWidth, value, () => GridPanelWidth);
}
}
The problem I am having is that when the splitter is moved, the binding updates only the Double (Value) component of the bound property, but not the GridUnitType part of it.
Example: the property defaults to 1*. User drags the splitter and the value becomes 354*, instead of just 354. On restoring the value, then, it's huge (354 times, not 354 pixels).
Why is this happening, and what would you do about it?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding GridPanelWidth, Mode=TwoWay}" />
<ColumnDefinition Width="4" />
<!--splitter itself is in this column-->
<ColumnDefinition x:Name="RightColumn" Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border
BorderBrush="Gray"
BorderThickness="1"
Grid.Column="0"
Grid.Row="0"
/>
<GridSplitter
Background="SteelBlue"
ResizeBehavior="PreviousAndNext"
ResizeDirection="Columns"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ShowsPreview="False"
Grid.Column="1"
Grid.Row="0"
/>
<Border
BorderBrush="Gray"
BorderThickness="1"
Grid.Column="2"
Grid.Row="0"
/>
<StackPanel
Grid.Row="1"
Grid.ColumnSpan="3"
Grid.Column="0"
>
<TextBlock>
<Run>GridPanelWidth: </Run>
<Run Text="{Binding GridPanelWidth.Value, Mode=OneWay}" />
<Run Text="{Binding GridPanelWidth.GridUnitType, Mode=OneWay}" />
</TextBlock>
<TextBlock>
<Run>RightColumn.Width: </Run>
<Run Text="{Binding Width.Value, ElementName=RightColumn, Mode=OneWay}" />
<Run Text="{Binding Width.GridUnitType, ElementName=RightColumn, Mode=OneWay}" />
</TextBlock>
</StackPanel>
</Grid>
Screenshot 1:
Screenshot 2:
Screenshot 3:
Res ipsa loquitor, as far as I'm concerned, but just to be on the safe side:
Because the parent may be resized, the grid splitter changes the ratio between the two columns, while preserving the GridUnitType.Star for each one so that when the parent is resized, the ratio will naturally remain constant. This preserves the intent of the initial Width values in the XAML.
Width.Value for the left column turns out to be identical to the left Border's ActualWidth, and the same holds true for the right column. You'll have to grab both and save the ratio.
Update
I find Grid/GridSplitter a bit overengineered for everyday use when all I want is Yet Another Navigation Pane, so I recently wrote a SplitterControl that has two content properties and sets up the grid and splitter, with styling, in the template. I hadn't gotten around to making the split ratio persistent, so I did that just now.
What I did was rather painful because the control is configurable, and the code isn't all that great, but I can share if you're interested.
The business end is simple:
When a column resizes, set a flag to block recursion and
PaneRatio = _PART_ContentColumn.Width.Value / _PART_NavColumn.Width.Value;
When PaneRatio changes, if it wasn't set by the column size change handler
_PART_NavColumn.Width = new GridLength(1, GridUnitType.Star);
_PART_ContentColumn.Width = new GridLength(PaneRatio, GridUnitType.Star);
In practice, the navigator/content columns can be swapped, or they can be rows instead. Both of those are done by switching templates on a HeaderedContentControl that's a child of the split control template.
I'm trying to extend the Calendar control into my own that has some dependency properties for setting things like the hover colors, highlight of the current day, and so on. I've got all of my properties and hook them up using bindings, but for some reason, the text displayed for the day of the week heading will not change its font color or style. At first I thought it was my bindings because I'm using a RelativeSource and finding the ancestor type, but I then tried setting them explicitly in the DataTemplate but nothing works.
Is this an inheritance issue from the Calendar base? Or is there something going on internally that's overriding my template? Here's my DataTemplate for the CalendarItem:
<DataTemplate x:Key="{x:Static CalendarItem.DayTitleTemplateResourceKey}">
<TextBlock Foreground="Red"
FontWeight="Bold"
FontSize="{Binding FontSize, RelativeSource={RelativeSource AncestorType=local:CalendarControl}}"
FontFamily="Arial"
HorizontalAlignment="Center"
Margin="0,6,0,6"
Text="{Binding}"
VerticalAlignment="Center" />
</DataTemplate>
The way I understand it from here, this DataTemplate is used to dynamically generate items for these which are then inserted into the "PART_MonthView" grid below:
<Grid x:Name="PART_MonthView"
Grid.ColumnSpan="3"
TextElement.FontFamily="Arial"
HorizontalAlignment="Center"
Margin="6,-1,6,6"
Grid.Row="1"
Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
</Grid>
Is this DataTemplate even the right template? When you view the control in runtime and use snoop to browse the visual tree, you can see the text blocks being inserted into the grid but the values are coming from a local source:
I'm stumped and can't find any concrete answers on how to style this stuff. Am I better off building my own UI and then just watching property values to see if they change? Any help is greatly appreciated.
The following page from MSDN describes the XAML for styling a calendar in full:
Calendar Styles and Templates
By modifying the value for the FontSize, FontWeight, and FontFamily attributes in the ControlTemplate for CalendarItem it is possible to modify the font appearance.
Here is an after picture with the font size bumped up to 16.
I think this is the easiest way to do you what you want. Make a new ControlTemplate for Calendar using the XAML from the example and then make your alterations.
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’m trying to create a simple image rotator control where a user can click an arrow and an image will slide to another one. I’m doing this with a stackpanel of images inside of a scrollviewer.
n silverlight, the following code works as expected:
<Grid x:Name="RootLayout" Margin="200" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="tt" />
</StackPanel.RenderTransform>
<StackPanel.Resources>
<Storyboard x:Name="sb">
<DoubleAnimation
Storyboard.TargetName="tt"
Storyboard.TargetProperty="X"
From="0"
To="-50"
Duration="0:0:0.25" />
</Storyboard>
</StackPanel.Resources>
<Rectangle Width="50" Height="50" Fill="Blue" />
<Rectangle Width="50" Height="50" Fill="Green" />
</StackPanel>
</ScrollViewer>
<Button Content="Push" Click="test" Grid.Row="1" Grid.Column="1" />
</Grid>
The "Push" button simply begins the storyboard.
Now, when I use this same code in a wp7 page, I get a runtime error on the Begin method of the storyboard saying that the targetname could not be resolved. Interestingly enough, if I remove the ScrollViewer wrapped around the StackPanel completely, the page runs just fine. Why would it fail on wp7 when the stackpanel is contained inside the scrollviewer? (Note that the root level of the phone page is phone:PhoneApplicationPage)
Thanks!
Can't answer why there is a difference, but generally when I have been writing storyboards on WP7 I reference the transform I want like this.
Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)
Perhaps there is a difference in the traveral algorithms.