Develop Reference

Add Command in Ellipse Windows store app

I implement MVVM in my project (Windows store app) using ICommand (because I don't understand the RelayCommand). How to bind command to Ellipse like button?
As far I know I can accomplish this by 2 method:
1/ Make Ellipse as Button Template then bind the command to button. I tried this method but it only works when I click the border of Ellipse.
2/ Add command to event PointerPressed of Ellipse which I don't have a clue.
<Button Grid.Column="0" Grid.Row="0" Command="{Binding GenerateLevel}">
<Button.Template>
<ControlTemplate>
<Ellipse Height="{Binding CircleDiameter[0]}" Width="{Binding CircleDiameter[0]}" Stroke="Crimson" StrokeThickness="10" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</ControlTemplate>
</Button.Template>
</Button>

Trying to apply SolidColorBrush resource to HeaderedContentControl BorderBrush

I'd like to link a SolidColorBrush from my Window to Another SolidColorBrush in My dictionary. I didn't find something like this , and may be it's not possible ...
here is the code in my "ResourceDictionary.xaml"
<SolidColorBrush x:Key="BrushBlueTransparent" Color="#33006D8F"/>
And in my windows i want a link to this resource like this :
<SolidColorBrush x:Key="ControlColor" Color="{Binding Source={DynamicResource BrushEvasanOrange}}"/>
For now, this code don't work ...
I want to use this link because i want to use this resource in my page in a multiple "" and if the color had to be change in the futur it could be easy to change with this way.
The Brush resource is used like this:
<HeaderedContentControl
x:Name="_demandeur"
BorderBrush="{DynamicResource BrushEncadre}"
BorderThickness="1"
Padding="10"
Margin="0,20,0,0"
Header="{x:Static p:Resources.EV_Demandeur}"
>
<WrapPanel
Margin="0"
Orientation="Horizontal"
HorizontalAlignment="Left"
>
<TextBlock
TextWrapping="Wrap"
FontWeight="Normal"
Text="text"
/>
</WrapPanel>
</HeaderedContentControl>

It sounds like your problem is that HeaderedContentControl ignores its BorderBrush property. There are two ways to fix this: One is to replace the HeaderedContentControl's Template with one that displays a border around the content, but that's a lot of trouble. Another is to use a subclass of HeaderedContentControl which already has a template that does you want (we'll get to that last).
One very simple option is to simply put a Border around the control, and move the Margin to the Border as well, so the orange border line will be inside the margin. This isn't the right answer in your specific case, but it's a good general answer to "how do I put a border around things in XAML?"
<Border
BorderBrush="{StaticResource BrushEncadre}"
BorderThickness="1"
Margin="0,20,0,0"
>
<HeaderedContentControl
x:Name="_demandeur"
Padding="10"
Header="{x:Static p:Resources.EV_Demandeur}"
>
<WrapPanel
Margin="0"
Orientation="Horizontal"
HorizontalAlignment="Left" >
<TextBlock
TextWrapping="Wrap"
FontWeight="Normal"
Text="text"
/>
</WrapPanel>
</HeaderedContentControl>
</Border>
But I'm wondering if HeaderedContentControl is really what you want here. HeaderedContentControl is a base class for a variety of controls which display content with a header. The subclasses are much more commonly used, and I have a feeling that what you really want here is GroupBox, which is one of those subclasses. You'd use it just the way you were using HeaderedContentControl:
<GroupBox
x:Name="_demandeur"
Padding="10"
Margin="0,20,0,0"
Header="{x:Static p:Resources.EV_Demandeur}"
BorderBrush="{StaticResource BrushEncadre}"
BorderThickness="1"
>
<WrapPanel
Margin="0"
Orientation="Horizontal"
HorizontalAlignment="Left" >
<TextBlock
TextWrapping="Wrap"
FontWeight="Normal"
Text="text"
/>
</WrapPanel>
</GroupBox>

WPF mouse down and mouseleftbuttonup event conflicts. 1 deactivates the other. (Borderless application)

I have a WPF application that is borderless so I needed to create my own buttons for windows functions and needed to add a MouseDown event to allow application to move when clicked and dragged.
The document outline is:
Window
grid
canvas
grid
stackPanel - this is where my windows close max and min buttons are.
here is the code for the StackPanel:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Canvas.Left="689" Canvas.Top="5">
<TextBlock x:Name="Minimize" Text="0" FontFamily="Webdings" Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0" MouseLeftButtonUp="Minimize_MouseLeftButtonUp"/>
<TextBlock x:Name="Maximize" Text="1" FontFamily="Webdings" Foreground="Black" Margin="5,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Right" MouseLeftButtonUp="Maximize_MouseLeftButtonUp"/>
<TextBlock x:Name="Close" Text="r" FontFamily="Webdings" Foreground="Black" Margin="5,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Right" MouseLeftButtonUp="Close_MouseLeftButtonUp"/>
</StackPanel>
When I add the MouseDown dragmove method, it cancels out the StackPanel and does not allow me to close the application as shown in the code above.
I think the document outline needs a specific order? need some help with maybe understanding how it prioritizes the event handlers and if I need to rearrange my document outline.

Calling .DragMove prevents the MouseLeftButtonUp from executing on a TextBlock, however the .Click event of a Button should work correctly.
If I remember correctly, the MouseDown event of a Button does not bubble up the UI tree, so the MouseDown event of the parent control (in this case, a StackPanel) does not get executed.
Since you are looking for the functionality of a Button using a different UI, I would recommend just using a <Button> that has it's Template overwritten.
For example,
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock Text="{TemplateBinding Button.Content}"
FontFamily="Webdings" Foreground="Black">
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It can be used like this :
<Button x:Name="Minimize" Text="0"
Style="{DynamicResource MyButtonStyle}"
Click="Minimize_Click" ... />

Open popup at the location of the button clicked

I am trying to create a popup that opens similar to the window preview option in Windows 8 taskbar. Basically, when I click or hover on a button, it opens a popup with basic information just above the button. Here is an example.
Right now, I am able to open the popup at either the extreme left or extreme right side of the page, using the code below.
<Frame x:Name="PopUpFrame" HorizontalAlignment="Left" Visibility="Hidden" Height="400" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Bottom" Width="400" Source="/BasicApp;component/StandingOrderPopUp.xaml" NavigationUIVisibility="Hidden"/>
I have 3 different buttons in the button bar, so I cannot set the fixed margin. I am trying to set the same in code but I am unable to get the absolute position and convert it to margin property. I am not sure, if there is a better solution either.
Edit:
Tried using popup but it doesn't open on button click.
<Popup x:Name="PopUpFrame" Placement="Top" PlacementTarget="{Binding ElementName=StandingOrderButton}" Width="400" Height="400">
<DockPanel Background="#770081a7">
<Canvas DockPanel.Dock="Bottom" x:Name="PopupButtonBar" Height="50" VerticalAlignment="Bottom">
<Button Height="30" Width="125" HorizontalAlignment="Right" VerticalAlignment="Center" Canvas.Top="10" Content="CLOSE" Foreground="White" Background="#ff0081a7" BorderBrush="White" FontFamily="Trebuchet MS" Canvas.Left="10" />
</Canvas>
<Label Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Top" Content="STANDING ORDERS" Foreground="#ffffffff"></Label>
<Grid DockPanel.Dock="Top">
<Border BorderThickness="2" BorderBrush="#FFff7a00"></Border>
<RichTextBox Margin="2" Foreground="#FF0081a7" FontFamily="Trebuchet MS" IsEnabled="False"/>
</Grid>
</DockPanel>
</Popup>
And here is the event handler.
Private Sub StandingOrder_Click(sender As Object, e As RoutedEventArgs)
PopUpFrame.Visibility = Windows.Visibility.Visible
End Sub
Edit:
Never mind. I am an idiot. Instead of setting IsOpen property, I set the visibility. :(
It works perfectly, although, I had to copy the whole design from the separate page to this one. Still better than nothing. Only problem now is if I click on something else, I will have to write code to make sure popup is closed.

You can use a Popup control, coupled with it's Placement property to display your popup based on the current location of your buttons.
<Popup Placement="Top" PlacementTarget="{Binding ElementName=yourButton}" ... />
Inside your Popup, you can place your UserControl or any content element which will act as the popup's content.
See here for further information on popup placements, and here for a tutorial on WPF Popup controls.

Think about using ContextMenu, and set it's content you whatever you want. Thats is the solution for you.

This is how i defined one of my popups:
<Popup x:Name="btnPowerPopup" Placement="Mouse" StaysOpen="False">
....
</Popup>
you can user from the code behind on a button click or something :
btnPowerPopup.IsOpen = true;
and when the job is done:
btnPowerPopup.IsOpen = false;
But StaysOpen="False" let's you close the PopUp when clicking somewhere else.

How to make Popup truly modal (similar to MessageDialog)

I am trying to display a popup/modal dialog which includes a textbox or some other additional control. To achieve this, I am setting a UserControl as a child of the Popup. The Popup's width and height are set to full screen so user interaction with ui elements in the background is not possible.
However, I realized that other popups can be displayed over the Popup that I was initially displaying. Thus making this not truly a modal control. Is there a way to make Popup completely modal (block any other UI elements including other Popups). Or is there another control i can use to display some kind of customized message dialog that is modal?
Any help is appreciated, thanks!

You do it like this:
<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Popup x:Name="MyModalPopup" IsOpen="True" IsLightDismissEnabled="False">
<Grid Width="{Binding ActualWidth, ElementName=LayoutRoot, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=LayoutRoot, Mode=OneWay}">
<Grid.Background>
<SolidColorBrush Color="White" Opacity=".25" />
</Grid.Background>
<Grid Width="500" Height="400" Background="Green" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Content="Close">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=MyModalPopup}" PropertyName="IsOpen"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
</Grid>
</Grid>
</Popup>
</Grid>
The IsLightDismissEnabled="False" part is important.
Best of luck!