Databases
StackOverflow2013
Postsdbo
POLocking popup position to element, or faking a popup with layers for in-place editing in an ItemsControl
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLocking popup position to element, or faking a popup with layers for in-place editing in an ItemsControl
    primarykey
    data
    text
    <p>What I am trying to achieve is essentially in-place editing of a databound object inside an <code>ItemsControl</code> in wpf. </p> <p>my <code>ItemsControl</code> is a horizontal <code>WrapPanel</code> containing multiple instances of a usercontrol (<code>NameControl</code>) which displays as a little pink Glyph with a person's name. It looks like this</p> <p><img src="https://i.stack.imgur.com/AOuEr.png" alt="Fig1"></p> <p>With a popup I am able to show an editor for this "Name" (Other properties of the bound object things like <code>Address</code>,<code>Gender</code> etc.) and this works absoluttely fine. My XAML at this point would be along the lines of</p> <pre><code>&lt;Style x:Key="NamesStyle" TargetType="{x:Type ItemsControl}"&gt; &lt;Setter Property="ItemsPanel"&gt; &lt;Setter.Value&gt; &lt;ItemsPanelTemplate&gt; &lt;WrapPanel Orientation="Horizontal" /&gt; &lt;/ItemsPanelTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property="ItemTemplate"&gt; &lt;Setter.Value&gt; &lt;DataTemplate&gt; &lt;StackPanel&gt; &lt;Button Command="{Binding EditName}" BorderThickness="0" Background="Transparent" Panel.ZIndex="1"&gt; &lt;widgets:NameControl /&gt; &lt;/Button&gt; &lt;Popup IsOpen="{Binding IsEditMode}" PlacementTarget="{Binding ElementName=button}" Margin="0 5 0 0" Placement="Relative" AllowsTransparency="True" &gt; &lt;Border Background="White" BorderBrush="DarkOrchid" BorderThickness="1,1,1,1" CornerRadius="5,5,5,5" Panel.ZIndex="100"&gt; &lt;Grid ShowGridLines="False" Margin="5" Background="White" Width="300"&gt; &lt;!-- Grid Content - just editor fields/button etc --&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;/Popup&gt; &lt;/StackPanel&gt; &lt;/DataTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>Giving an output when I click a Name looking like</p> <p><img src="https://i.stack.imgur.com/37q5F.png" alt="Fig2"></p> <p>With this look im quite happy (apart from my awful choice of colours!!) except that the popup does not move with the widow (resize/minimize/maximize) and that popup is above <em>everything</em> even other windows. </p> <p>So one way to solve part of that is to "attach" or lock the popup position to the element. I have not found a good/easy/xaml way to do that. Ive come across a few code-based solutions but im not sure I like that. It just has a bit of a smell about it.</p> <p>Another solution ive tried to achieve is to ditch the popup and try to emulate the behaviour of a layer/panel that sits above the other names but is position over (or below, im not fussy) the associated name control.</p> <p>Ive tried a few different things, mainly around setting <code>Panel.ZIndex</code> on controls within a <code>PanelControl</code> (The Grid, the WrapPanel, a DockPanel on the very top of my MainWindow) with little success. I have implemented a simple <code>BoolToVisibilityConverter</code> to bind my editor Grid's <code>Visibility</code> property to my <code>IsEditMode</code> view model property and that works fine, but I cant for the life of me arrange my elements in the <code>ItemsControl</code> to show the editor grid over the names.</p> <p>To do what is described above I simply commented out the <code>Popup</code> and added the following binding to the <code>Border</code> which contains the editor grid <code>Visibility="{Binding IsEditMode, Converter={StaticResource boolToVisibility}}"</code>.</p> <p>All that does is this:</p> <p><img src="https://i.stack.imgur.com/KBVyg.png" alt="Fig3"></p> <p>It just shows the popup <em>under</em> the name but not <em>over</em> the others.</p> <p>Any help? What am I doing wrong? </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJamiec
    1. USJamiec
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POLocking popup position to element, or faking a popup with layers for in-place editing in an ItemsControl
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POLocking popup position to element, or faking a popup with layers for in-place editing in an ItemsControl
      1. USJamiec
      1. VTBountyStart
    3. VO
      singulars
      1. POLocking popup position to element, or faking a popup with layers for in-place editing in an ItemsControl
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload