Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is a pure XAMl example of how you can achieve Pin/Unpin functionality. </p> <pre><code>&lt;Grid&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="*"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;DockPanel Grid.Column="1"&gt; &lt;Label Content="Main Content Area" FontSize="22" VerticalAlignment="Center" HorizontalAlignment="Center"/&gt; &lt;/DockPanel&gt; &lt;StackPanel HorizontalAlignment="Left"&gt; &lt;StackPanel.Style&gt; &lt;Style&gt; &lt;Setter Property="Grid.Column" Value="1"/&gt; &lt;Style.Triggers&gt; &lt;DataTrigger Binding="{Binding ElementName=LeftPinBtn,Path=IsChecked}" Value="True"&gt; &lt;Setter Property="Grid.Column" Value="0"/&gt; &lt;/DataTrigger&gt; &lt;/Style.Triggers&gt; &lt;/Style&gt; &lt;/StackPanel.Style&gt; &lt;ToggleButton Content="Pin/Unpin" x:Name="LeftPinBtn"/&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; </code></pre> <p>In the above code, </p> <ul> <li>The left panel lies (floats) on the same grid column of the Main content.</li> <li>When the <strong>ToggleButton</strong> is checked they jump to their respective docking grid column.</li> </ul> <p>You may customize this example &amp; include the mouseover events which will show/hide the panels. </p> <ul> <li>Adding a Grid column to the right + <code>HorizontalAlignment="Right"</code> will give you right panel.</li> <li>Similarly using <strong>Rows</strong> (instead of columns) &amp; <strong>VerticalAlignment</strong> will add top/bottom pin functionality.</li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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