I have a small user control that contains some Xaml markup that includes a TextBox. When the control is selected, I automatically set focus on the TextBox. However, when the user clicks on any other element (such as a border) the focus is removed from the TextBox.
For example,
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="Blue" IsHitTestVisible="False" />
<TextBox Grid.Row="1" />
<TextBlock Grid.Row="2" Text="Something" IsHitTestVisible="False" />
</Grid>
Clicking either the Rectangle or the TextBlock causes the TextBox to lose focus.
What's the best way to retain focus on the TextBlock? I feel I'm missing something simple.
The click is probably going through the grid and giving focus to whatever is under it.
Try setting Background="Transparent" on the <Grid>
The only solution I found was to rebuild the Xaml surrounding the control in question so that custom control incorporated everything that I wanted to not affect the the focus of the text box. And then put a handler on the mouse event to ensure that the TextBox retained focus.
I was not happy with the solution but couldn't think of anything else.
( I did try to handle the LostFocus event and determine if the mouse was still the user control, but gave up with that route when I had to continually keep track of the mouse location ).
Related
I have a combo box which is filled with checkbox items.
When I scroll down I would like to have the first item of the combo box to always be visible.
It should kind of look like the the navigation bar on this or other websites.
Thanks in advance.
You can modify control template, see this post how to extract it.
Below is ugly (but working) solution to see current selected item on top of popup, which you can modify to your liking:
For this you have to extract combobox control template as mentioned before, then search for
<Popup x:Name="PART_Popup"
and modify its
<Border x:Name="DropDownBorder"
by adding inside a Grid like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ContentControl Content="{TemplateBinding SelectionBoxItem}" />
Now just set grid row for ealier existing scroll viewer:
<ScrollViewer x:Name="DropDownScrollViewer" Grid.Row="1">
don't forget to close Grid attribute after it:
</Grid>
Is anyone familiar with websites that have an attribute similar to a tree-view? Like the download segment of the Microsoft website. You press the plus button, it expands and everything below it moves further down. You press the minus button and everything in that block collapses and the content below shifts back up.
Granted C# is nothing like HTML and CSS but I just wanted to know if it was possible to do the same in a WPF application.
It seems like the tree-view currently in the tool box allows for text only to be implemented. It doesn't allow for additional objects such as labels or text-boxes.
I discovered the EXPANDER and it does a good job of expanding and collapsing its content's but isn't quite capable of pulling objects beneath it back up or pushing them back down. Here's an example of the scenario I would like.
An example of what I'm going for would be microsoft's download page if it helps. How their expand and collapse buttons work.
So is there any way to do this?
Here is an example of using the Expander as the way the download page on Microsoft uses it. Note that the Height of the RowDefinitions is set to Auto, otherwise the Expander does not collapse when IsExpanded is set to false.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Expander IsExpanded="True">
<Border BorderBrush="Red" BorderThickness="2">
<TextBlock Height="50" Text="Hello" />
</Border>
</Expander>
<Expander Grid.Row="1" IsExpanded="True">
<Border BorderBrush="Green" BorderThickness="2">
<TextBlock Height="50" Text="World" />
</Border>
</Expander>
</Grid>
regular tree view can do what you ask.
see this wonderful code-project explanation:
http://www.codeproject.com/Articles/124644/Basic-Understanding-of-Tree-View-in-WPF
WPF Expander component do exactly what you want and it push down other control if hosted in a proper panel. Try using a StackPanel for example.
I have a windows phone application.
Whenever I set a buttons visibility to collapse and I make it visible again I have to click on it twice to get it to fire the command it binds to. How can I make it fire after the first time again? It does not even hit any code at all on the first time. Both the visibility and button command is set through binding it to the view model properties.
I guess you are using MVVM light?
If so I had some similar problem when I used ICommand. If you instead only use the build-in relay command, then that solved the problem for me.
I think the problem comes from a "focus" issue. I suspect that the focus is confused by the change in visibility. The first click is then used to restore the focus.
To avoid this problem, I force the focus to be on the button just after changing the visibility
private void RequestDialogBoxEvent(object sender)
{
this.DialogBox.Visibility = System.Windows.Visibility.Visible;
this.buttonOK.Focus();
}
with the XAML for the dialog box:
<Border x:Name="DialogBox" Background="Black" Grid.Row="1" Visibility="Collapsed" >
<Grid Margin="0,20" VerticalAlignment="Center" Background="Black">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Confirm ?" />
<Button x:Name="buttonOK" Content="OK" Grid.Row="1" Click="Button_Click" />
</Grid>
</Border>
My form in wpf has has to look like this:
I need to create a textbox that contains a button and an image. The idea of this is that when I click on the image the text entered is shown as bullets . How can I do this in wpf? I don't know what tools to use.
Think of it as creating a user control and adding a textbox and a button to it, not as adding a button to a textbox (and note you can have the button overlap the textbox to create a similar effect).
If you want to use it at just one place.. you can achieve this like below:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.ColumnSpan="2"/>
<Button Margin="3" Grid.Column="1" Width="30">
<Image Source="myImage.png"/>
</Button>
</Grid>
You can make a borderless TextBox, and a button (with the image) near it, and surround them both with a border, what will give you the look anf funcionality you want.
I have a grid of controls, where each editable control (checkbox, combobox, etc.) has an associated label. I want to share a tooltip between the label and its control.
Now this is something that I have accomplished by using BindableToolTips: I simply define the ToolTip in my XAML resources, and then set the same ToolTip object individually on the label and the control.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Content="Example" />
Unfortunately, this doesn't make it appear smoothly... When the mouse is moved from the label to the control, or from the control to the label, the tooltip disappears and reopens, appearing to flicker. This occurs even when there is no gap between the label and control, and does not look good. This obviously occurs because they are two separate tooltips.
I would like to somehow group the label and its associated control, and have the tooltip appear on that single group; this way, it can appear fluidly and not flicker when the mouse is moved between the two. Unfortunately, I am struggling to do this. Here are some things I have tried...
Empty TextBlock with the tooltip applied and ColumnSpan=2.
Unfortunately, this prevents the control from receiving mouse clicks, as the TextBlock covers it up invisibly. I have tried setting IsHitTestVisible to false, but then that prevents it from receiving mouse over events, which stops the tooltip appearing at all. If I could just make it so that the mouse clicks through the empty TextBlock, but the TextBlock still gets mouse over events, then it would be perfect.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}" />
Nested grid specifically for the one label and one control.
This method seems to work: the tooltip appears whenever the mouse is anywhere over the inner grid, and mouse events are still successfully passed to the control. Unfortunately, this has three problems:
It is very messy, as I will need many nested grids for every label/control combination.
The "Auto" column widths no longer take into account the widths of other controls in the outer grid, because this is of course a separate grid.
It seems to ignore the tooltip placement settings, which are Placement=Right and with PlacementTarget being the specific control. Instead, the tooltip appears underneath the inner grid.
If the last two problems could be fixed, then this would be an acceptable solution.
Code:
<Grid Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
</Grid>
Does anybody have any ideas for a good solution to this problem? I simply want my tooltips to appear over both the label and the associated control as though they are one element, without flickering when the mouse is moved between them all. That's all.
Just wrap the controls in a content presenter and attach the tooltip to that.
<Window x:Class="StackOverflowWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<ContentPresenter ToolTip="Blah">
<ContentPresenter.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Example label:"/>
<CheckBox Grid.Column="1" x:Name="ExampleControl" Content="Example" />
</Grid>
</ContentPresenter.Content>
</ContentPresenter>
</Window>