We Keep Coding

Can't set keyboard focus to ScrollViewer in WPF

I have a control with a button and scrollviewer next to it. I want to be able to change keyboard focus via arrow keys or the tab key. I've set scrollviewer's focusable to true, but it seems it still cannot gain focus via keyboard. If I click on the scrollviewer then I can scroll using the arrow keys (up/down), but I cannot actually navigate to it without using the mouse.
I can focus on the button fine and if I change the scrollviewer for another control (in the same position) such as ScrollContentPresenter then the other control can switch focus between itself and the button as I would expect.
I am trying to understand why ScrollViewer cannot gain focus here. All search results I have found have the reverse problem (ScrollViewer stealing focus). Also if I set focusable to true on a control inside the ScrollViewer then it can gain focus as well. It just seems to be impossible for ScrollViewer to gain focus.
Here's the code sample with commented out ScrollContentPresenter (which can gain focus when used to replace ScrollViewer).
<Grid >
<StackPanel Orientation="Horizontal">
<Button Height="50" Width="300" Style="{StaticResource ButtonStyleLol}" />
<ScrollViewer Height="200" Width="1300" Focusable="True">
<StackPanel Height="1000" >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFF71E1E" Offset="1"/>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</ScrollViewer>
<!--<ScrollContentPresenter Height="200" Width="1300" Focusable="True">
<ScrollContentPresenter.Content>
<StackPanel Height="1000">
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFF71E1E" Offset="1"/>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</ScrollContentPresenter.Content>
</ScrollContentPresenter>-->
</StackPanel>
</Grid>

Setting the IsTabStop property of the ScrollViewer to true seems to work for me:
<ScrollViewer IsTabStop="True" Focusable="True">

How to show a popup on datagrid button click in wpf c#?

I have a common popup in my wpf window and I have a button in the datagrid as well. What I want is to open the popup when the button is clicked. The popup should be independent to each button click. For example, let's say that I have two rows in the datagrid. When I click on the first button popup should appear,then I do some changes to that popup and close it. Now I click the second button it should open a new popup instead of the changes I made before. I'm using a common popup for this. Please anyone tell me is it possible to handle my requirement with common popup window?
XAML
<Popup x:Name="popUpServer" IsOpen="False" Placement="MousePoint" >
<Border Background="#FFEFF2F3" BorderBrush="Black" BorderThickness="1" Width="229" Height="145">
<StackPanel Orientation="Horizontal" Margin="0,0,0,-17">
<Grid Width="227" Margin="0,0,0,10">
<GroupBox Header="Configuration" HorizontalAlignment="Left" Margin="9,6,-9,0" VerticalAlignment="Top" Height="125" Width="211">
<Grid>
<Label Content="Auto Restart" HorizontalAlignment="Left" Margin="10,6,0,0" VerticalAlignment="Top"/>
<ToggleSwitch:HorizontalToggleSwitch x:Name="tsAutoRestart" HorizontalAlignment="Left" Margin="97,10,0,0" VerticalAlignment="Top" Width="46" ThumbSize="22" Height="21" RenderTransformOrigin="3.522,1.048">
<ToggleSwitch:HorizontalToggleSwitch.UncheckedBackground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC80000" Offset="1"/>
<GradientStop Color="#FF0A0A0A" Offset="0.853"/>
</LinearGradientBrush>
</ToggleSwitch:HorizontalToggleSwitch.UncheckedBackground>
<ToggleSwitch:HorizontalToggleSwitch.CheckedBackground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#000000" />
<GradientStop Color="#000000" Offset="1" />
</LinearGradientBrush>
</ToggleSwitch:HorizontalToggleSwitch.CheckedBackground>
<ToggleSwitch:HorizontalToggleSwitch.ThumbBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFD6D4D4" />
<GradientStop Color="#FFD6D4D4" Offset="1" />
<GradientStop Color="#FFD6D4D4" Offset="0.02" />
</LinearGradientBrush>
</ToggleSwitch:HorizontalToggleSwitch.ThumbBrush>
</ToggleSwitch:HorizontalToggleSwitch>
<ComboBox x:Name="cbDuration" HorizontalAlignment="Left" VerticalAlignment="Top" Width="92" Margin="97,40,0,0">
<ComboBoxItem Content="30 Minutes"/>
<ComboBoxItem Content="1 Hours"/>
<ComboBoxItem Content="2 Hours"/>
</ComboBox>
<Label Content="After" HorizontalAlignment="Left" VerticalAlignment="Top" Width="83" Margin="9,36,0,0"/>
<Button x:Name="btnApply" Content="Apply" HorizontalAlignment="Left" Margin="125,75,0,0" VerticalAlignment="Top" Width="64" Click="BtnApply_Click"/>
</Grid>
</GroupBox>
</Grid>
</StackPanel>
</Border>
</Popup>
Datagrid
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<Button x:Name="txtServerInfo" Click="TxtServerInfo_Click" Height="23" Width="28">
<Button.Background>
<ImageBrush ImageSource="img.png"/>
</Button.Background>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Code behind file
private void TxtServerInfo_Click(object sender, RoutedEventArgs e)
{
popUpServer.IsOpen = true;
}

If you want to use a common popup means better create a popup in a separate user control.then for a button click you can create a new object for the user control and then open the popup by using the user controls object.then the values inside the popup will be independent of the previous button click.

please try the next solution; combine your popup with the button into a separate user control, in that way you can trigger the popup opening based on the button click, and for each button click there will be it's(button) own popup opened there. When you combine the popup and the button together they will have the same data context, thus you will have no problem to make a binding, from the other hand if you want a different data contexts for these controls you can support the user with two dependency properties form that a combined user control.
I'll glad to help if you will have problems with the code, let me know about that.
Regards.

C# Xaml ListBox Template Add in c#

I did some research about the listbox but i didnt understand how to solve my problem.
I have a Listbox in my xaml page and i want to add now a listviewitem using the Template (so i get toggle button and so on) not in xaml and with the help of c#. How do i do this? Thx for your help
<ListBox x:Name="Listbox" Background="Red">
<ListBox.ItemTemplate >
<DataTemplate>
<Grid x:Name="TemplateGrid">
<ToggleSwitch x:Name="Toggle" Foreground="Black">
<ToggleSwitch.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</ToggleSwitch.Background>
</ToggleSwitch>
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" Width="26" x:Name="Text" Foreground="Black">Test</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>

The listbox will use the template automatically. From your code, just call Listbox.Items.Add(obj). One thing to note though - in your data template I don't see that you are specifying a datatype for your data template to target, so it will use a generic display by calling ToString() on your object.

How to bind a field to a gauge control?

I've added a WPF gauge control from this class https://github.com/JohanLarsson/GaugeBox but I'm not sure how to wire the control up to a field of type double degreeOutput declared in the code behind.
My aim is to bind degreeOutput to the gauge control and have the values from degreeOutput update the gauge accordingly.
The process I followed in setting up the control is:
1)Add the control to the user control's xaml layout and declare the namespace
xmlns:gauges="clr-namespace:Gauges;assembly=Gauges"
2)Set the value property to Value="{Binding degreeOutput}"
3)Run application, (but the gauge doesn't update in accordance with the
degree readings being output from degreeOutput)
Does anyone know what step I'm missing in binding the control to my degree field?
This is the xaml layout for the guage control:
<gauges:Gauge x:Name="Gauge"
Grid.Row="0"
Margin="13,18,134,134"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Marker="{Binding Marker}"
Maximum="{Binding Max}"
Minimum="{Binding Min}"
Placement="{Binding Placement}"
ShowLabels="{Binding ShowLabels}"
ShowMajorTicks="{Binding ShowTicks}"
ShowTrack="{Binding ShowTrack}"
TickFrequency="{Binding TickFrequency}"
Value="{Binding degreeOutput}" RenderTransformOrigin="0.5,0.5">
<gauges:Gauge.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-89.868"/>
<TranslateTransform/>
</TransformGroup>
</gauges:Gauge.RenderTransform>
<gauges:Gauge.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="Red" />
<GradientStop Offset="0.10" Color="Red" />
<GradientStop Offset="0.10" Color="Green" />
<GradientStop Offset="0.90" Color="Green" />
<GradientStop Offset="0.90" Color="Red" />
<GradientStop Offset="1.0" Color="Red" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</gauges:Gauge.Background>
</gauges:Gauge>
And the code behind where degreeOutput is declared:
private double degreeOutput;

Generally speaking you can't bind to fields in WPF (see the answer to this SO question).
Try changing degreeOutput into a public property. This will be enough to feed the initial value through into the gauge control.
If you also want changes made by the gauge control to feed back into your property then the class containing the property must also implement INotifyPropertyChanged.

Height and Width with a menu

<Menu Height="50" Margin="0,0,0,0" HorizontalAlignment="Stretch" FlowDirection="RightToLeft">
<Menu.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
<GradientStop Color="#FFB3DDF2" Offset="1.0"/>
<GradientStop Color="#FFD6E9F4" Offset="0.0"/>
</LinearGradientBrush>
</Menu.Background>
</Menu>
This Menu will stretch no matter how long the page is and doesn't need to have a width.
<Menu Width="350" Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Left" FlowDirection="RightToLeft" DockPanel.Dock="Bottom">
<Menu.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
<GradientStop Color="#FFD6E9F4" Offset="1.0"/>
<GradientStop Color="White" Offset="0.0"/>
</LinearGradientBrush>
</Menu.Background>
</Menu>
I want to do the same with this menu however it requires a height which means if i stretch the page down, the menu size will not stretch with the page. When I don't put a height into the code no menu bar appears. My question is how come I don't need a width for the menu bar but i need a height.
Thanks in advance

It is by design.
A menu bar is something that is assumed to stretch across the control it is contained in. That's why it doesn't need a width.
It needs a height because you can put any content inside it.
A stretch height wouldn't have a whole lot of meaning for a menu control, since it'd just be a large blank area of its background color, if WPF were to draw it for you.