I have the following XAML code.
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VariableSizedWrapGrid Orientation="Horizontal">
<Rectangle Width="400" Height="400" Fill="Green"/>
<Rectangle Width="400" Height="400" Fill="Blue"/>
</VariableSizedWrapGrid>
<Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>
The code generates the following page.
When the app window's width is dimminished, the app window looks like this.
How do I make the blue square wrap (get below the green square) when the pink square obscures it partly?
The exact same thing happen when I use the community toolkit's WrapPanel instead of the VariableSizedWrapGrid. The code below shows how it looks then.
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/>
<wrapPanel:WrapPanel Orientation="Horizontal" >
<Rectangle Width="400" Height="400" Fill="Green"/>
<Rectangle Width="400" Height="400" Fill="Blue"/>
</wrapPanel:WrapPanel>
</RelativePanel>
Initially when you start resizing the page, the WrapPanel's width isn't changing at all and that's why you don't see the green rectangle to go to the second row.
The trick is to give the WrapPanel a right margin that equals to the width of the pink one.
<wrapPanel:WrapPanel Orientation="Horizontal" Margin="0,0,600,0">
Related
I want a grid to stretch across the screen while also having a shadow effect applied, for some reason I can't the grid to stretch when placed inside of a DropShadowPanel.
Here is an example of the desired result, but without a shadow effect:
<Grid Background="LightBlue">
<Grid Background="WhiteSmoke" HorizontalAlignment="Stretch" Height="200" VerticalAlignment="Top" Margin="40"/>
</Grid>
Result:
Here is my xaml with a DropShadowPanel:
<Grid Background="LightBlue">
<controls:DropShadowPanel HorizontalAlignment="Stretch" Margin="40">
<Grid Background="WhiteSmoke" HorizontalAlignment="Stretch" Height="200" VerticalAlignment="Top"/>
</controls:DropShadowPanel>
</Grid>
And this hides the second grid entirely.
Why does the grid act differently inside a DropShadowPanel?
And this hides the second grid entirely.
The problem is you have not set HorizontalContentAlignment property of DropShadowPanel. I have modified your code like the following. And it works.
<controls:DropShadowPanel Margin="40"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
>
<Grid Background="Red" Height="200" HorizontalAlignment="Stretch"/>
</controls:DropShadowPanel>
I tried this, but I can't scroll the canvas. I tried to handle mousewheel change event of other controls but scrolling is not working. Anybody has idea what I am doing wrong ?
<Viewbox Stretch="Fill" StretchDirection="Both" Height="300" Width="300">
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="20,0,20,0" Height="300" Width="300">
<Canvas Background="White" Height="300" Width="500">
<TextBlock FontSize="20" Text="This Is Far Right" Canvas.Left="350" Foreground="Black" />
</Canvas>
</ScrollViewer>
</Viewbox>
Try specify width and height of the canvas bigger than the outer element, eg.
<Canvas Background="White" Width="500" Height="500" />
ScrollViewer.VerticalScrollMode="Disabled" solved my problem.
I am working with TagVisualization, which displays an ellipse around the tag with name. I want to put 2 round buttons on the circumference (at well defined points) on the ellipse so that clicking them will result in change of some label text. I am unable to do this because I am unable to add s:Contacts.ContactDown property to the smaller ellipse.
Below is the XAML:
<s:TagVisualization x:Class="ControlsBox.TagVisual"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008"
Loaded="TagVisual_Loaded">
<Canvas>
<Ellipse Width="300" Height="300" Stroke="White" StrokeThickness="8" Opacity="0.7">
<Ellipse.Effect>
<BlurEffect Radius="12" />
</Ellipse.Effect>
</Ellipse>
<Ellipse Height="296" Width="296" Stroke="AntiqueWhite" StrokeThickness="4" >
<Ellipse.Effect>
<BlurEffect Radius="4"/>
</Ellipse.Effect>
</Ellipse>
<Label Content="John's Phone" HorizontalContentAlignment="Center" Padding="0,250,0,0" VerticalContentAlignment="Bottom" IsHitTestVisible="false">
<Label.Effect>
<DropShadowEffect BlurRadius="9" ShadowDepth="0" Color="Aqua"/>
</Label.Effect>
</Label>
<Ellipse Height="40" Width="40" Stroke="White" StrokeThickness="4" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,70,0,0" Fill="Black"
s:Contacts.ContactDown="UNABLE_TO_ADD" />
</Canvas>
After doing bit of googling, it appeared that using Expression Blend to create buttons with a style is an easier option.
I can not figure out what I did wrong. I have a Usercontrol that has a vertical progressbar and under it a label.
<UserControl x:Class="IFramedInBrowser.Code"
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" Height="150" Width="15">
<Grid Width="120" Height="15" >
<StackPanel Width="120" Height="15" >
<ProgressBar Grid.Row="0" Value="{Binding Path=Percent}" Maximum="100" Width="120" Height="15" />
</StackPanel>
<TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock1" Text="{Binding Path=Symbol.Name}" VerticalAlignment="Top" >
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<Grid.RenderTransform>
<RotateTransform Angle="-90"/>
</Grid.RenderTransform>
</Grid>
</UserControl>
This usercontrol is then used in a ItemsControl
<ItemsControl x:Name="HorizontalListBox"
ItemsSource="{Binding Source={StaticResource MyViewModel}, Path=List}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center" Height="150"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<my:Code DataContext="{Binding}">
</my:Code>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
It should look like a piano keybord at the end...
After the rotation transformation the progressbar is chopped... What did I dowrong? How to fix this?
You can try to add different background colors to all controls to find out sizes of controls.
Also SilverlightSpy is now free for read only and you can go through the real visual tree at runtime.
Anyway, I would suggest to change the orientation of ProgressBar by customizing its template.
This is a clipping issue. You are setting too many heights and widths everywhere and it's confusing to know which one is in control of dimensions. Also, the stacking in the ListBox works on the layout and the RotateTransform is only effective on the final visual pass, so it's rotating a clipped progress bar.
You should follow jumbo's advice and create a vertical progress bar by modifying the template, not by rotation.
If you don't want to create the template, then you need to remove the main Grid you have in the UserControl and use a Canvas instead. Canvases don't clip. They let your elements float freely, which is probably what you want.
In XAML, I want the button to go on the BOTTOM of the red rectangle.
I clearly say:
"HorizontalAlignment="Right"
VerticalAlignment="Bottom"
It goes to the right but stays on the top. Why is that?
alt text http://tanguay.info/web/external/buttonTop.png
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MultiplePages.Page"
Width="300" Height="150">
<StackPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="300" Height="150" Orientation="Vertical">
<StackPanel Width="300" Height="100" Background="Blue">
<TextBlock x:Name="theTextBlock" Text="This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. "
TextWrapping="Wrap" Height="100" Width="300" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Width="300" Height="50" Background="Red">
<Button Name="Switch" Content="Switch Page" Width="100" Height="20"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</UserControl>
The StackPanel is meant to take it's sizing from it's elements and it's container (depending on it's orientation), although what you've done looks correct, that's not the way the StackPanel is "meant" to be used. Although it looks like it's the height it's set, it's actual height (that it uses for laying out child controls) is the size of it's content (the button). The StackPanel has it's uses, but if you are doing anything other than a simple stack of controls then you generally should be using something else.
You can fix it by either sticking a sized grid inside:
<StackPanel Width="300" Height="50" Background="Red">
<Grid Height="50">
<Button Name="Switch" Content="Switch Page" Width="100" Height="20"
HorizontalAlignment="Right" VerticalAlignment="Bottom"
/>
</Grid>
</StackPanel>
Or, for that particular layout, you might want to look at DockPanel, which will behave more like you would expect it to.