We Keep Coding

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 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

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.

ComboBox avoid popup close

I am trying to make a custom color picker which inherit from ComboBox.
This is the screenshot.
As you can see, it's just a very normal color picker interface.
So far, almost everything is fine except the problem I write in the screenshot.
I can drag the spectrum slider, RGBA sliders and click those 2 buttons without problem.
If I click on empty space inside the ComboBoxItem, the popup disppears, this is also the behavior I need and it works.
Here are the codes of the canvas area.
XAML
<Canvas x:Name="colorPlatte" Width="175" Height="150" Grid.Row="0" Grid.Column="0" Margin="4" MouseLeftButtonDown="colorPlatte_MouseLeftButtonDown" MouseLeftButtonUp="colorPlatte_MouseLeftButtonUp" MouseMove="colorPlatte_MouseMove">
<Rectangle x:Name="ColorShadingRectangle"
Height="{Binding ElementName=colorPlatte, Path=Height}"
Width="{Binding ElementName=colorPlatte, Path=Width}"
Fill="{Binding ElementName=sliderSpectrum, Path=SelectedColor, Converter={StaticResource ColorToSolidBrush}}"/>
<Rectangle x:Name="WhiteGradient" Width="{Binding ElementName=colorPlatte,Path=Width}" Height="{Binding ElementName=colorPlatte,Path=Height}">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="#ffffffff" />
<GradientStop Offset="1" Color="Transparent" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="BlackGradient" Width="{Binding ElementName=colorPlatte,Path=Width}" Height="{Binding ElementName=colorPlatte,Path=Height}">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,1" EndPoint="0, 0">
<GradientStop Offset="0" Color="#ff000000" />
<GradientStop Offset="1" Color="#00000000" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Canvas x:Name="colorSelector" Width="12" Height="12" IsHitTestVisible="False">
<Ellipse Width="12" Height="12" StrokeThickness="3" Stroke="#FFFFFFFF" IsHitTestVisible="False" />
<Ellipse Width="12" Height="12" StrokeThickness="1" Stroke="#FF000000" IsHitTestVisible="False" />
</Canvas>
</Canvas>
Code-behind related to the canvas
private void colorPlatte_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Point p = e.GetPosition(colorPlatte);
UpdateColorSelectorPosColor(p);
colorPlatte.CaptureMouse();
}
private void colorPlatte_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
Point p = e.GetPosition(colorPlatte);
UpdateColorSelectorPosColor(p);
Mouse.Synchronize();
}
}
private void colorPlatte_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
colorPlatte.ReleaseMouseCapture();
}
So, how should I prevent the popup close after user drags the color selector?
Thanks.
Edit : 12/6
Sorry for not descript my question clearly and miss lead you, the previous screenshot was taken in design mode directly and might ignore too much.
I should not say inherit from ComboBox, the ColorPicker is actually an UserControl, and I place it in baseComboBoxItem(inherit from ComboBoxItem) which under a baseComboBox(inherit from ComboBox)
When user click the ComboBox, only one item in popup(the ColorPicker) for user to choose color.
But if user drag the color selector(please refer to previous screenshot), it cause the ComboBox popup(dropdown?) closed automatically.
My question is how should I do to stay the popup open after user drag the color selector(after user trigger MouseLeftButtonUp event)?

I think that if you want to do that (and use a combobox) you have to set the whole template of the combobox (described here), and in the popup set StayOpen to True.
But, as HighCore commented, you don't really need a combobx.
You should have a ToggleButton, and When it's Checked set the canvas visibility to visible, and when it's not checked set the canvas visibility to collapsed