I have a control containing a PathListBox from Blend SDK (see XAML below). The items inside are of identical width and various height. Currently, the midpoint of the items follow the arc's path (see the picture) i.e. they are clearly vertically arranged 'center'. However, I would like the items 'top' vertically aligned, so their top follows the arc's path. How can I do that?
<Grid x:Name="LayoutRoot">
<ec:PathListBox Margin="160,290,-30,-250">
<ec:PathListBox.LayoutPaths>
<ec:LayoutPath SourceElement="{Binding ElementName=arc}"
Padding="-25" FillBehavior="NoOverlap"
Distribution="Even" Span="0.5"/>
</ec:PathListBox.LayoutPaths>
<Rectangle Fill="#FFF4F4F5" Height="103" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="120" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="140" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="265" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="265" Width="100"/>
</ec:PathListBox>
<ed:Arc x:Name="arc"
ArcThickness="10" ArcThicknessUnit="Pixel" Margin="160,290,-30,-250"
Stretch="None" Stroke="Transparent" StartAngle="-7"
RenderTransformOrigin="0.5,0.5" StrokeThickness="3"
Opacity="0.155" Fill="LightGray">
<ed:Arc.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
<SkewTransform AngleY="-17" AngleX="-16"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</ed:Arc.RenderTransform>
</ed:Arc>
</Grid>
Just change margins of your rects:
...
<Rectangle Fill="Green" Height="103" Width="100" Margin="0,130,0,0"/>
<Rectangle Fill="Green" Height="120" Width="100" Margin="0,120,0,0"/>
<Rectangle Fill="Green" Height="140" Width="100" Margin="0,140,0,0"/>
<Rectangle Fill="Green" Height="265" Width="100" Margin="0,265,0,0"/>
<Rectangle Fill="Green" Height="100" Width="100" Margin="0,100,0,0"/>
<Rectangle Fill="Green" Height="265" Width="100" Margin="0,265,0,0"/>
...
I'm after trying it myself on Blend4 and it works.
Related
I have the below code. I am trying to place the image directly to the right of the textblock within the border, but the image is almost touching the right side of the screen. How can I allign the image to the right of the textblock
<Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
HorizontalAlignment="Stretch">
<DockPanel LastChildFill="False">
<TextBlock DockPanel.Dock="Left"
Style="{StaticResource HeaderTextBlockStyle}"
Text="Check new items"
VerticalAlignment="Center" Margin="2" />
<Image
DockPanel.Dock="Left"
VerticalAlignment="Center"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="HighQuality"
Source="/Media/pointer.png"
RenderTransformOrigin="0.95,4.046"
HorizontalAlignment="Center" Margin="0"
Height="25.306" Width="25.008>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="49.57"/>
<TranslateTransform X="-39.746" Y="-21.185"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</DockPanel>
</Border>
Try using the Grid control and define two columns into it
<Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<Column Definition Width="*"/>
<Column Definition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource HeaderTextBlockStyle}"
Text="Check new items"
VerticalAlignment="Center" Margin="2" />
<Image
Grid.Column="1" VerticalAlignment="Center"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="HighQuality"
Source="/Media/pointer.png"
RenderTransformOrigin="0.95,4.046"
HorizontalAlignment="Center" Margin="0"
Height="25.306" Width="25.008>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="49.57"/>
<TranslateTransform X="-39.746" Y="-21.185"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Border>
Try using a StackPanel with Orientation set to horizontal instead of the dockpanel. That should put the image right next to the textblock.
if you still want to use the dock panel try setting the margin you want, on the image like margin="0,0,100,0"
I have a UniformGrid object in my WPF project that has 2 rows and 3 cols and its width and height are set to auto (with both alignments set to Stretch).
This grid will hold 6 squares that I want to fill as much of their cell as possible and be centered horizontally and vertically.
What do I need to be added to allow for the squares to increase/decrease their length/width based on the dynamic size of the parent? I.E., when the window is resized.
Here is my xaml so far:
<UniformGrid Rows="2" Columns="3">
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
</UniformGrid>
Edit:
And the Rectangle objects need to remain square.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid>
<UniformGrid Rows="2" Columns="3">
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
</UniformGrid>
</Grid>
</Page>
You could do this:
<UniformGrid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Width"
Value="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" />
</Style>
</UniformGrid.Resources>
Or you could bind the Height to the ActualWidth.
Unfortunately this will not keep them stretched to the maximum.
If you remove the height and width properties it will do just that.
I use the stack panel. It looks like every elements inside is stacking tightly. How to leave some margin between them.
Easiest way is to give each item it's own Margin
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" StrokeThickness="5" Margin="5,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" StrokeThickness="5" Width="100" Height="35" Margin="5,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" Margin="5,0,0,0" StrokeThickness="5"/>
</StackPanel>
Below is the full XAML for the WPF application, no codebehind. On computers that have Expression Blend 4 installed, the following application works. However, on machines that do not have Blend, the application crashes. This is extremely simplistic, but it appears that the [i:Interaction.Behaviors] portion is what is causing the issue, which is a behavior from Blend that creates a smooth animation.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
x:Class="WpfApplication12.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<WrapPanel>
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children"/>
</i:Interaction.Behaviors>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
</WrapPanel>
</Grid>
You should ship System.Windows.Interactivity.dll with your application. Go to properties of that DLL in the references of you project and set Copy Local property to True. After that this assembly will be copied to the output folder of the project.
You need to include System.Windows.Interactivity.dll which is located at (Blend 3 pathing) ...Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\WPF
That file is redistributable as defined by (Blend 3 pathing) ...Program Files\Microsoft SDKs\Expression\Blend 3\Redist.en.txt
I am trying to model the layout that is displayed in this image.
If you take a look, it has a number of textBoxes/checkboxes/buttons, a couple of diagonal controls, and another separate control (in a red outline).
The bottom screenshot shows what I would like to happen when a checkbox is checked in that separate control.
Any tips on how to lay this out and handle those diagonal portions? I tried just rotating textBlocks with borders but then the borders remain as rectangular, not cut off as in the image. I also had some trouble with getting them to position properly. I would also need the width of those diagonal sections to be bound somehow to the checkbox/textBox portion of that separate control in the red border.
Is my only choice to rotate borderless textBlocks and draw the lines myself using Paths and for the width expanding, bind it to some property of my separate control?
Thanks for any advice.
This looked like a fun challenge. Give the following XAML a try. It will automatically adjust the size of the columns as the content expands. The key is placing some canvas elements in a grid to allow the lines of the borders to flow into the adjacent cells. This could certainly be cleaned up with some styles and will be a little fragile if you need to tweak the sizes, but I think it demonstrates the approach:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ButtonStyleTestApp.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="#FF44494D" SnapsToDevicePixels="True">
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Grid.Resources>
<Grid Background="#DDD">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="0" Grid.Row="1">
<TextBox Margin="10 5" VerticalAlignment="Center"/>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="1" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox1" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox1, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="2" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox2" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox2, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="3" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox3" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox3, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1" BorderBrush="#888" Grid.Column="4" Grid.Row="1">
<Button Margin="3" FontSize="10" VerticalAlignment="Center" Width="40">Click</Button>
</Border>
<Canvas Grid.Column="1">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#888"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 1
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="2">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 2
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="3">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 3
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="4">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Grid>
</Canvas>
</Grid>
</Grid>
</Window>
I hope it helps.
It's definitely doable with borders and textblocks but it's tedious.
you'd have to play with negative margins a lot.
You could work it out with images instead of borders but you still need the textblocks on an angle using rendertransform
I'd definitely approach it using a Grid with a lot of columns of width Auto, place the easy components first then the tricky ones and do the rotations + neg margins last.
HTH.
As far as handling the diagonal elements goes, try putting the TextBlock within a Border, and transforming the border with a RotateTransform and SkewTransform. This should get you started:
<Grid HorizontalAlignment="Left" Height="100" Margin="64,60.5,0,0" VerticalAlignment="Top" Width="100" Background="Blue">
<Border BorderBrush="Black" BorderThickness="1" Margin="20,25.5,20.5,41.5" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="20"/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock TextWrapping="Wrap" Text="TextBlock" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Border>
</Grid>