Develop Reference

Increase hitbox size of textbox to show context menu

I have a multiline textbox in which the right click context menu only appears if you right click on a line which contains text. I would like to expand the hitbox so that right clicking anywhere within the textbox will show the default context menu.
In the image below, I have highlighted the region in which the right click context menu works.
Here is the XAML for the textbox:
<TextBox Margin="3" VerticalContentAlignment="Top"
Cursor="IBeam"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"
TextWrapping="Wrap" AcceptsReturn="True"
AcceptsTab="True" SpellCheck.IsEnabled="True"
IsReadOnly="{Binding IsReadOnly}"
Text="{Binding CONFIDENTIAL}"
adonisExtensions:WatermarkExtension.Watermark="CONFIDENTIAL"
/>
Please let me know if there is additional information I can provide.

How can I make the checkmark in this MenuItem respect the overall Foreground color?

I am making a menu using MenuItem controls placed inside of a StackPanel.
Here's an example of the menu item XAML:
<Border Grid.Column="1"
Background="Black"
BorderBrush="{x:Static SystemColors.ActiveBorderBrush}"
BorderThickness="1"
Opacity="0.8"
Padding="3">
<StackPanel Orientation="Vertical">
<MenuItem Foreground="White"
Header="Show Mini Map"
IsCheckable="True"
IsChecked="{Binding ShowMiniMap, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
...more items...
</StackPanel>
</Border>
...and here's what it looks like on-screen:
You can see how the checked items have the usual blue ring around the checkmark, and the checkmark is there...it's just black. Why does it not respect the item's Foreground property?
Is there a way to make it do so without having to take on maintenance of a gazillion-line template override? The examples I've found online thus far are incredibly ridiculous for such a small thing.

How to get rid of grey area on DockPanel and Calender?

I have a Calendar control made to drop down when needed, but I have these great big greay area on both sides.
I have tried everything I possibly can, but I can't seem to get rid of the grey area on both sides of a calendar.
This is the XAML,
<DockPanel Grid.Row="0" Grid.Column="8" Height="25">
<Menu DockPanel.Dock="Top" Height="25" Width="100">
<MenuItem Header="calender" Height="25" Width="100" >
<Calendar Name="CalenderSelect"
SelectionMode="MultipleRange"
SelectedDatesChanged="Calendar_OnSelectedDatesChanged"
Width="192">
</Calendar>
</MenuItem>
</Menu>
</DockPanel>
My second question, is this the correct way to create a drop down control with a calendar inside it. Or am I doing this wrong, any help would be much appreciated.

First of all, from my point of view to use a menu is a bad idea to create a drop down control. You can do something similar and easier with a button.
However if you want to use the MenuItem control, you have to change the MenuItem.ItemsTemplate in order to reduce margins and remove background color:
<Menu DockPanel.Dock="Top" Height="25" Width="100">
<MenuItem Header="calender" Height="25" Width="100" AutomationProperties.IsColumnHeader="True" >
<MenuItem.Items>
<Calendar Name="CalenderSelect" SelectionMode="MultipleRange" > </Calendar>
</MenuItem.Items>
<MenuItem.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Margin="-35,-5,-50,-5" Background="{x:Null}"></StackPanel>
</ItemsPanelTemplate>
</MenuItem.ItemsPanel>
</MenuItem>
</Menu>
I hope this can help you.

Set button size to size of image

I have a couple of buttons that I am displaying on my application GUI using the following XAML in my WPF project:
<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" >
<Image Source="C:\...\arrow_left.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" >
<Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" />
</Button>
However, when I run my application, the buttons appear to be bigger than the size of the images I'm displaying on them- i.e. the images are 30x30, but the buttons are rectangular, rather than square, with their height being greater than their width.
I am drawing the buttons next to each other, in a row with a few other buttons to give a 'menu bar' look at the top of the application window. However, because the height of these buttons is displaying a greater value than what I've set, there is a bit of 'white space' being shown along the menu bar, above and below other buttons that are being displayed with the height value that I've set, for example:
<Button Style="{DynamicResource NoChromeButton}" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80">
<TextBlock>Send Reference</TextBlock>
</Button>
With this button, it would seem that because I am displaying text, and not an image on it, it has kept to the height & width values that I have set, but this means that it has some 'white space' above and below it, since the other buttons are causing the <StackPanel> where I've placed these buttons to take up more vertical space than I had intended.
How can I force the buttons on which I am displaying images to display at the size I have set them?
Edit
It seems that this was to do with what happens when I manually resize the window when the running the application- that the <StackPanel>/<TabPanel> are automatically resized when the window is resized... I have set the Height of the <StackPanel> to a specific value, and this now means that the buttons are all restricted to that size, so they all stay the same size, which is great.
But, when I resize the window, this causes the <TabPanel> that they are in to be resized, so I end up with white space above and below the buttons- is there a way that I can stop this?

Set the button's VerticalAlignment to the top.
Set the desired width/height on the button and not the image.
Do this via the Margin property. Also check out Alignment on MSDN.
Then set the image's stretch to Stretch.Fill.
Alternatively, something in you style might be throwing you off, because this
<Button VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0">
<Image Width="30" Height="30" />
</Button>
Worked perfectly for me.

This code is exactly what you want:
<Button Width="100" Height="100" Padding="0" BorderThickness="0">
<Image Source="image.jpg" Stretch="Fill"/>
</Button>
Note Padding and BorderThickness values which fit the image to the button.
As RoyalPotato said you can change button Width and Height and the image size will be dynamically stretched.

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.