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.

How do I 'enable' a user control that already has datacontext defined?

Having difficulty getting a certain UI behavior. I have two user controls defined. The first control simply goes and gets the path of a database to open. I want the second control to be enabled when a path is selected. Here is my XAML...
<advanced2:LoadOnDemandDemoControl BorderBrush="#FFA1BD17" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Width="290" Margin="25,34,0,52"
DataContext="{Binding SourceTree}" IsEnabled="{Binding ElementName=pathName, Path=Text.Length, Mode=OneWay}">
<advanced2:LoadOnDemandDemoControl.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFCFB0B0" Offset="1"/>
</LinearGradientBrush>
</advanced2:LoadOnDemandDemoControl.Background>
</advanced2:LoadOnDemandDemoControl>
<advanced2:PathSelector x:Name="pathName" Grid.Row="0" Grid.Column="0" Margin="0,61,0,0" RenderTransformOrigin="0.53,1.6"></advanced2:PathSelector>

Use a property trigger to Enable your control when there is text in pathName control.
You can use elementName to find your source control.
You can do https://stackoverflow.com/a/822961/1011959

Creating a reflection of a WindowsFormHost in wpf

I am very new to WPF and I am a bit stuck.
I'm trying to create a demo program that displays several embedded win forms applications. I'd like to add a reflection of the form, but most of the existing tutorials I've seen seen for image reflections do not work.
If anyone can point me in the right direction I would really appreciate it.
Here is the relevent XAML - the form control is added to the embedForm stack panel dynamically.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Name="inkBorder" Grid.Row="0" VerticalAlignment="Bottom" Margin="20"
Width="400" Height="500" CornerRadius="5" BorderThickness="4">
<Border.BorderBrush>
<LinearGradientBrush SpreadMethod="Reflect" StartPoint="0,0" EndPoint="0.5,0.5">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gray" Offset="0" />
<GradientStop Color="#eeeeee" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<StackPanel Name="EmbedForm" Height="100" Width="400" ></StackPanel>
</Border>
<Rectangle Grid.Row="1" VerticalAlignment="Top"
Width="{Binding ElementName=inkBorder,Path=ActualWidth}"
Height="{Binding ElementName=inkBorder,Path=ActualHeight}">
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="#66000000" />
<GradientStop Offset="1.0" Color="#00000000" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<VisualBrush
Visual="{Binding ElementName=inkBorder}">
<VisualBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1" />
<TranslateTransform Y="1" />
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
To clarify the question a bit...
I am mainly looking for a way to apply any visual transformations to controls like the WindowsFormHost and the WebBrowser control.
I've found that even simple transformations do not work with these, and I was wondering if there is any trick to treating these like standard visual elements or if it is a lost cause.

Transformations on WindowsFormsHost or WebBrowser won't work, because these controls don't use the WPF rendering engine, they use GDI+.
As far as I know, the only way to achieve what you want would be to capture the control's content as an image, and manually perform the transformation on the image using GDI+ functions... It's quite easy for a simple reflection, but it can get tricky for other kinds of transformation...

Dynamically load images from database and display in Silverlight 3 image rotator

I have a Silverlight 3 image rotator that displays approx.7 images. You can rotate it back and forth, and it will make the left or right image the selected image. The rotator is using jpg images that resides in an image folder. I would like to dynamically load image strings from the database, since I have hundreds of images available. My question is: How can I load a list or collection based on a query, convert the image strings into Pictures and load them into the rotator dynamically. here is what I have now.
XAML
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:CollectionFlow="clr-namespace:CollectionFlow;assembly=CollectionFlow"
x:Class="CollectionFlowSample.MainPage"
d:DesignWidth="640" d:DesignHeight="480" Loaded="UserControl_Loaded" Width="900" Height="800">
<UserControl.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform Y="100"/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="5"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Height="180"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="140" BorderThickness="10" Margin="16,14,0,0"
CornerRadius="2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF282323" Offset="1"/>
<GradientStop Color="#FF413636" Offset="0.556"/>
<GradientStop Color="#FFCEBABA" Offset="0.83"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Image Source="{Binding Mode=OneWay}" Stretch="Fill" >
<Image.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.5"/>
</Image.Effect>
</Image>
</Border>
<Image Source="{Binding Mode=OneWay}" Grid.Row="2" RenderTransformOrigin="0.5,0.5">
<Image.Effect>
<BlurEffect/>
</Image.Effect>
<Image.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0.5"/>
<GradientStop Offset="1" Color="#7F000000"/>
</LinearGradientBrush>
</Image.OpacityMask>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<CollectionFlow:CollectionFlowPanel ItemHeight="400" ItemWidth="160" FocusedItemOffset="60" UnfocusedItemOffset="40" ItemVisibility="5" RenderTransformOrigin="0.5,0.5"/>
</ItemsPanelTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA0A0A0" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<CollectionFlow:CollectionFlow x:Name="ImageList" ItemTemplate="{StaticResource DataTemplate1}" ItemsPanel="{StaticResource ItemsPanelTemplate1}">
<CollectionFlow:CollectionFlow.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEAE2E2"/>
<GradientStop Color="#FF0E0101" Offset="1"/>
<GradientStop Color="#FF676464" Offset="0.665"/>
</LinearGradientBrush>
</CollectionFlow:CollectionFlow.Background>
</CollectionFlow:CollectionFlow>
C# code
ImageList.ItemsSource = new string[] {"SampleImages/10019436.jpg","SampleImages/10042172.jpg" etc...
Here is what like to do.....
Query Database get records back and then...
use the conversion function process...
string sPic = (string)emps.Photo.ToString();
EmpPic1.Source = ConvertBase64ToImage(sPic);
public BitmapImage ConvertBase64ToImage(string base64String)
{
//Convert Base64 String to byte[]
byte[] imageBytes = Convert.FromBase64String(base64String);
BitmapImage bi = new BitmapImage();
bi.SetSource(new MemoryStream(imageBytes));
return bi;
}
This is where I like to add the queried images to a collection,and use the technique described above to dispaly them in the image rotator.
Any help would be appreciated.

you need to request data using a web server (through a web service call is a good way of achieving this) this will return the data to your silverlight application, you wont be able to connect to a database directly with silverlight, your service will access the database and it can then return the data to your application to be consumed by the code you discussed above.
Create a web service that returns the image data
add a web reference to your silverlight application that points to your service
use the generated proxy to call the service and return the data to your application
- you could either use the serviceclient of the proxy with an asynchronous call back or forget the proxy and just call the service using webclient
i think its important to understand the client based nature of silverlight, it lives in a sandbox on a remote computer in its most typical use case, so accessing data doesnt use the same approach as say a windows forms application>