Right now I have button on a usercontrol. Clicking that button will launch a window as follows,
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Effect = new BlurEffect();
dlg = new WidgetWindow();
dlg.Owner = Window.GetWindow(this);
dlg.Show();
this.Effect = null;
}
Now please see the Image. Whenever I click outside the widget window i.e. anytime I click on the grayed out area of the usercontrol, I want the circular widget window to close. I am trying to raise an event for the usercontrol as follows but the event never fires. I also tried mouse down with no luck. I also tried raising the events to the child container of the usercontrol which is Grid in my case but the event wont raise. Please help
private void Tbl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (dlg != null)
{
dlg.Close();
}
}
Here is the code for the WidgetWindow.
<Window WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowState="Maximized"
AllowsTransparency="True" Background="#80000000"
Title="WidgetWindow" ShowInTaskbar="False" Loaded="widget_Loaded">
<Grid>
<Grid.Background>
<SolidColorBrush Opacity="0.5" Color="White"></SolidColorBrush>
</Grid.Background>
<ListBox BorderThickness="0" Name="lstBox" Height="980" Width="980" ItemsSource="{Binding}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<local:CircularPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Background>
<SolidColorBrush Opacity="0" Color="Gray"></SolidColorBrush>
</ListBox.Background>
</ListBox>
<Grid Height="524" Width="524" Margin="54,36,0,0">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"></GradientStop>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Grid Name="Inner1" Margin="0,5,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn1" Width="130" Height="130" HorizontalAlignment="Center" VerticalAlignment="Top" Click="btn1_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Grid.Row="0" Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/fruits.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="0,4,0,0" FontSize="12" HorizontalAlignment="Center" Grid.Row="1">Locate Sessions</TextBlock>
</Grid>
<Grid Name="Inner2" Margin="34,124,0,150">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn2" Width="130" Height="130" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btn2_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/bird.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="20,4,0,0" FontSize="12" HorizontalAlignment="Left" Grid.Row="1">Mass Surveillence</TextBlock>
</Grid>
<Grid Name="Inner3" Margin="0,124,34,150">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn3" Width="130" Height="130" HorizontalAlignment="Right" VerticalAlignment="Center" Click="btn3_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/forest.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="0,4,8,0" FontSize="12" HorizontalAlignment="Right" Grid.Row="1">Subscriber Intelligence</TextBlock>
</Grid>
<Grid Name="Inner4" Margin="34,285,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn4" Width="130" Height="130" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btn4_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/nature.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="45,4,0,0" FontSize="12" HorizontalAlignment="Left" Grid.Row="1">Analytics</TextBlock>
</Grid>
<Grid Name="Inner5" Margin="0,285,34,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn5" Width="130" Height="130" HorizontalAlignment="Right" VerticalAlignment="Center" Click="btn5_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/beach.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="0,4,40,0" FontSize="12" HorizontalAlignment="Right" Grid.Row="1">Historical</TextBlock>
</Grid>
<Grid Name="Inner6" Margin="0,0,0,10" >
<Button Name="btn6" Width="130" Height="130" HorizontalAlignment="Center" VerticalAlignment="Bottom" Click="btn6_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/Exit.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Grid Name="Inner7" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Name="btn7" Width="130" Height="130">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Name="pointerEllipse" Stroke="Black" StrokeThickness="1">
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Grid>
<!--</ControlTemplate>
</Button.Template>
</Button>-->
</Grid>
</Window>
You can use Popup instead of WidgetWindow. Put all your WidgetWindow content into Popup. Configure Popup Staysopen="False". You can refer to below code:
<Popup Name="popLink" StaysOpen="False" Placement="Mouse" MaxWidth="200"
PopupAnimation="Slide" AllowsTransparency="True">
...Your content
</Popup>
Use popLink.IsOpen = true to open it.
Related
I've created a custom error box with a rectangle for a header bar (the window is borderless). I'm trying to get the header rectangle to work like any window header bar and allow dragging to move. I have the code in place, however it only works by the edge of the rectangle (approx half a cm) and not anywhere in the rectangle.
I've set the height, width, and fill of the rectangle but not sure if there's a property I'm missing somewhere which allows click drag to work anywhere?
Rectangle definition:
<Window x:Class="CustomErrorBox"
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"
xmlns:local="clr-namespace:View"
mc:Ignorable="d"
Title="WpfMessageBox" MinHeight="240"
MinWidth="500" MaxHeight="540" MaxWidth="720"
Background="Transparent"
SizeToContent="WidthAndHeight"
WindowStartupLocation="CenterScreen"
ShowInTaskbar="False" ResizeMode="NoResize"
WindowStyle="None" Topmost="True"
Name="WindowError" SizeChanged="WindowError_SizeChanged">
<Border BorderBrush="LightSlateGray" BorderThickness="0" CornerRadius="0">
<Grid >
<Grid.Resources>
<Style TargetType="Button" x:Key="MessageBoxButtonStyle">
<Setter Property="Background" Value="Transparent" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border" CornerRadius="0" BorderBrush="#000" BorderThickness="1,1,1,1" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" MouseDown="Rectangle_MouseDown" Width="Auto" Height="Auto">
<Rectangle.Fill>
<!-- TODO - Find some nice colours for header bar -->
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.5">
<GradientStop Color="#26508A" Offset="0.0"/>
<GradientStop Color="#2A739E" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="2" Width="Auto" Height="Auto">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.8">
<GradientStop Color="#FF7FCFFF" Offset="1"/>
<GradientStop Color="#FFCFFFCF"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid Grid.Row="0" Grid.ColumnSpan="2" MinHeight="40" >
<TextBlock Margin="5,1,0,1" Name="MessageTitle" FontWeight="Bold" TextTrimming="CharacterEllipsis" LineHeight="22" FontSize="16" VerticalAlignment="Center" Foreground="White"/>
</Grid>
<Image Name="img" Margin="5" Grid.Row="1" Grid.Column="0" Width="35" Height="35" Stretch="Fill" />
<ScrollViewer Grid.Row="1" Grid.Column="1" VerticalScrollBarVisibility="Auto">
<TextBlock Margin="10,5,10,5" VerticalAlignment="Center" TextWrapping="Wrap" Name="txtMsg" FontSize="14" LineHeight="20" ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ScrollViewer>
<Grid Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="0" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Name="btnOk" Content="OK" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#b6dbd6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
<Button Name="btnYes" Content="Yes" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#b6dbd6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<Button Name="btnNo" Content="No" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#dbb6b6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
<Button Name="btnCancel" Margin="3,5" Content="Cancel" MinWidth="70" Height="35" Click="Button_Click" Style="{StaticResource MessageBoxButtonStyle}" Foreground="Black"
Background="#dbb6b6" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</StackPanel>
</Grid>
<Expander Header="Further Information" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,5,0,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<TextBlock Margin="10,5,10,5" Name="ExpanderMessage" TextWrapping="Wrap" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
</ScrollViewer>
<Button Grid.Row="1" Name="ClipboardButton" Click="Button_Click_1" Content="Copy to Clipboard" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</Expander>
</Grid>
</Border>
</Window>
MouseClick function:
private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e)
{
if (e.ChangedButton == MouseButton.Left)
this.DragMove();
}
The issue is that your "MessageTitle" TextBlock is in top of the Rectangle.
If you intend to set the Text property of this TextBlock to display a title, you could use a WindowChrome instead of handling the MouseDown event for the Rectangle:
<Window ...>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="40" GlassFrameThickness="0" CornerRadius="0" />
</WindowChrome.WindowChrome>
<Border BorderBrush="LightSlateGray" BorderThickness="0" CornerRadius="0">
<Grid >
...
<Rectangle Grid.ColumnSpan="2" Height="40">
<Rectangle.Fill>
<!-- TODO - Find some nice colours for header bar -->
</Rectangle.Fill>
</Rectangle>
Please take a look at the code below:
<Window x:Class="WpfTest.Test2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test2" Height="300" Width="400">
<Grid>
<DockPanel LastChildFill="true">
<Expander DockPanel.Dock="Left" Header="" Background="#E2FFD6"
HorizontalAlignment="Left" VerticalAlignment="Stretch"
ExpandDirection="Left" IsExpanded="True" Height="Auto">
<StackPanel>
<Button Content=" open some tabs and show a messagebox "/>
<Button Content="do something else"/>
</StackPanel>
</Expander>
<TabControl HorizontalAlignment="Stretch">
<!-- some tabs here -->
</TabControl>
</DockPanel>
</Grid>
</Window>
which results in this:
As you see in the picture, this doesn't look nice and I want to move the expander icon to the center of the header. How can I do this? I tried changing the HeaderTemplate, but it didn't affect the icon placement.
This behaviour is hard-coded in the Template. When we edit a copy:
Rightclick your element in the designer window (not in the Xaml-Code),
then "Edit Template..." and "Edit a Copy..."
We find the relevant code in the ExpanderLeftHeaderStyle
<Style x:Key="ExpanderLeftHeaderStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.LayoutTransform>
...
</Grid.LayoutTransform>
<Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" StrokeThickness="2" VerticalAlignment="Center"/>
</Grid>
<ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The RowDefinitions determine the location of the Icon (= the inner Grid), so we need to change them and the Row assignments for the inner Grid and ContentPresenter accordingly:
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="19"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.LayoutTransform>
...
</Grid.LayoutTransform>
<Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" StrokeThickness="2" VerticalAlignment="Center"/>
</Grid>
<ContentPresenter Grid.Row="2" HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
</Grid>
</Border>
I've got an storyboard which lies inside a grids resources. The grid is inside a Listbox, and I can find the storyboard and call the storyboard.Begin(), However nothing happens when I do this, even though it is supposed to. Here is what I've got so far:
<ListBox x:Name="Defense_Units_LB" Margin="168,92,471,83" ItemsSource="{Binding DefendersUnits}">
<ListBox.ItemTemplate>
<DataTemplate x:Name="Def_Datatemplate">
<Grid x:Name="Grid_animation" Background="Green">
<Grid.Resources>
<Storyboard x:Key="test_stb">
<ColorAnimation Storyboard.TargetName="Grid_animation" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" Duration="0:0:1" To="Red"/>
</Storyboard>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Height="50" Width="50" Stretch="Uniform">
<Units:UnitSelector DataContext="{Binding}"/>
</Viewbox>
<Rectangle Fill="#FFF7C85F" HorizontalAlignment="Left" Height="16" Margin="1,32,0,0" Stroke="#FF000000" StrokeLineJoin="Round" VerticalAlignment="Top" Width="33" Grid.Column="1"/>
<TextBlock x:Name="Amount" HorizontalAlignment="Left" Height="16" TextWrapping="Wrap" Text="{Binding Amount}" VerticalAlignment="Top" Width="33" FontFamily="Andalus" FontSize="21.333" Foreground="#FF004F24" TextAlignment="Center" Margin="1,32,0,0" Grid.Column="1"/>
<Rectangle x:Name="rectangle1" Grid.Column="1" Margin="53,0,0,0" StrokeLineJoin="Round">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="Units_Killed" HorizontalAlignment="Right" Height="19" TextWrapping="Wrap" Text="{Binding Lost}" VerticalAlignment="Top" Width="33" FontFamily="Andalus" FontSize="14.667" Foreground="#FF900000" Margin="51,16,0,0" Grid.Column="1" Opacity="0"/>
<Rectangle x:Name="rectangle" Grid.Column="1" Fill="#FF900000" HorizontalAlignment="Left" Height="3" Margin="53,24,0,0" StrokeLineJoin="Round" VerticalAlignment="Top" Width="14" Opacity="0"/>
<!--<Path Data="M54.5312,22.8125 L65.157,22.8125" Fill="#FFF7C85F" HorizontalAlignment="Left" Height="3" Margin="53.954,24.562,0,0" Stretch="Fill" Stroke="#FFA70000" StrokeThickness="2" StrokeLineJoin="Round" UseLayoutRounding="False" VerticalAlignment="Top" Width="8.126" StrokeEndLineCap="Triangle" StrokeStartLineCap="Triangle" Grid.Column="1"/>-->
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I find the storyboard from the code behind by doing:
private void Fight_Button_Click(object sender, RoutedEventArgs e)
{
Damage_FadeIn.Begin();
ListBoxItem LBI = Defense_Units_LB.ItemContainerGenerator.ContainerFromIndex(0) as ListBoxItem;
Grid Gr = FindDescendant<Grid>(LBI);
System.Windows.Media.Animation.Storyboard stb = Gr.Resources["test_stb"] as System.Windows.Media.Animation.Storyboard;
//System.Windows.Media.Animation.Storyboard stb = Gr.Resources["storyboard_UKF"] as System.Windows.Media.Animation.Storyboard;
//System.Windows.Media.Animation.Storyboard stb1 = Gr.Resources["storyboard_DFU"] as System.Windows.Media.Animation.Storyboard;
string name = Gr.Name;
stb.Begin();
// stb1.Begin();
}
Anyone knows why nothing happen when the storyboard.begin() function is called?
I am trying to learn XAML and am creating a simple app based off this:
I have created the buttons for each of the circles, but where I am running into an issue is the drawing of the lines and autosizing them to the button positions. I was wondering if there is a way to bind the start/end point of a path to a button location? Is there a better way doing this in XAML?
Here is what my current XAML code is...
<Page
x:Class="PennyGame.GameControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PennyGame"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Width="100" Height="100" Margin="540,133,0,535" Name="Button_Top1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
<Path Data="M49,100 L48,401" Fill="Gold" Height="302" Stretch="Fill" Stroke="Gold" UseLayoutRounding="False" Width="2"/>
</Button>
<Button Width="100" Height="100" Margin="725,133,0,535" Name="Button_Top2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="725,534,0,134" Name="Button_Bottom2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="540,534,0,134" Name="Button_Bottom1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="434,244,0,424" Name="Button_Left1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="434,423,0,245" Name="Button_Left2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="831,244,0,424" Name="Button_Right1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="831,423,0,245" Name="Button_Right2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Path Data="M526,475 L826,475" Fill="White" Margin="534,0,539,292" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" VerticalAlignment="Bottom" d:LayoutOverrides="LeftPosition, RightPosition" Height="10" />
<Path Data="M526,295 L826,295" Fill="White" Margin="534,294,538,0" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" VerticalAlignment="Top" d:LayoutOverrides="LeftPosition, RightPosition" Height="2" />
<Path Data="M590,235 L590,535" Fill="White" Margin="590,233,0,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" Width="2" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Left" />
<Path Data="M775,235 L775,535" Fill="White" Margin="0,233,590,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" Width="3" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Right" />
<Path Data="M590,535 L826,295" Fill="White" Margin="590,294,539,238" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M775,535 L526,295" Fill="White" Margin="534,296,589,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M526,475 L775,235" Fill="White" Margin="534,233,589,291" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M590,235 L826,475" Fill="White" Margin="590,233,540,291" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
</Grid>
If you stick to handle it in XAML using grids you can use a canvas for each button-line-button constellation.
I'd recommend to handle it in code.
See my example bellow.
I bound actual Canvas properties to each button and the connector line.
It should properly if you resize the container grid, or reposition your canvas.
RESULT:
CODE:
<Grid Width="300" Height="300">
<Canvas x:Name="lineCanvas1">
<Line x:Name="line" Fill="Green" Stroke="Green" UseLayoutRounding="False" X1="1" Y1="1" X2="{Binding ActualWidth, ElementName=lineCanvas1}" Y2="{Binding ActualHeight, ElementName=lineCanvas1}" />
<Button x:Name="button1" Content="Button One" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Background="Red" RenderTransformOrigin="1,1" Height="100" Width="100"/>
<Button x:Name="button2" Content="Button Two" HorizontalAlignment="Stretch" Margin="-100,-100,0,0" VerticalAlignment="Stretch" Background="Red" Canvas.Left="{Binding ActualWidth, ElementName=lineCanvas1}" Canvas.Top="{Binding ActualHeight, ElementName=lineCanvas1}" RenderTransformOrigin="1,1" Height="100" Padding="0" Width="100"/>
</Canvas>
</Grid>
I am doing work on WPF to make a 2D football game. How can I add image of an ellipse? I learned how to move a rectangle and ellipse but can't implement with image of football.
<Window x:Class="PaddingBall.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Padding Ball v1.0" Height="500" Width="700" Background="Gray" Name="playground" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" SizeToContent="Manual">
<Canvas Width="700" Height="500">
<Menu VerticalAlignment="Top" HorizontalAlignment="Left"
Height="20" Width="700" Background="AliceBlue" Foreground="Blue">
<MenuItem Header="File">
<MenuItem Header="Start Game" Background="AliceBlue" Click="StartGame"></MenuItem>
<MenuItem Header="Exit" Background="AliceBlue" Click="ExitGame"></MenuItem>
</MenuItem>
<MenuItem Header="About" Click="ShowAboutBox"></MenuItem>
</Menu>
<Grid Height="462" Width="700" Canvas.Left="-106" Canvas.Top="-22">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="700*" />
<ColumnDefinition Width="0*" />
<ColumnDefinition Width="0*" />
</Grid.ColumnDefinitions>
<Ellipse Margin="114,132,0,0" Name="ball" Stroke="Black" Fill="Blue" Height="38" VerticalAlignment="Top" Stretch="UniformToFill" HorizontalAlignment="Left" Width="38">
<Ellipse.BitmapEffect>
<BevelBitmapEffect BevelWidth="11" />
</Ellipse.BitmapEffect>
<Ellipse.BitmapEffectInput>
<BitmapEffectInput />
</Ellipse.BitmapEffectInput>
</Ellipse>
<Rectangle Height="13" Margin="200,390,0,0" Name="pad" Stroke="Black" VerticalAlignment="Bottom" Fill="Black" HorizontalAlignment="Left" Width="100" />
</Grid>
</Canvas>
Fill the Ellipse with an ImageBrush:
<Ellipse ...>
<Ellipse.Fill>
<ImageBrush ImageSource="ball.jpg"/>
</Ellipse.Fill>
</Ellipse>
It is same for both as Clemens has answered ..
For Rectangle it is:
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="Pic.jpg"/>
</Rectangle.Fill>
</Rectangle>
For Ellipse:
<Ellipse>
<Ellipse.Fill>
<ImageBrush ImageSource="Pic.jpg"/>
</Ellipse.Fill>
</Ellipse>