WPF Popup Location Control

Question

My application has one Main Window. and Main Window has one button. Looks Like this. When User Click that button, pop out Setting Window. I want to put it on the right side of Main Window. Even when the user is moving while holding the Main Window. At first time, i tried it in xaml code of Setting Window. It made me happy for a few minutes. but it worked differently than I imagined. After all, what I want is a Setting Window located on the right side of the Main Window. Wherever the Main Window is, it sticks to the right side of the Main Window, and even if you drag it out, you want the Main Window and Setting Window to move together.

View Model

public ICommand CheckCommand
        {
            get
            {
                if (_CheckCommand == null)
                {
                    _CheckCommand = new RelayCommand<bool>(Check);
                }

                return _CheckCommand;
            }
        }

        private void Check(bool state)
        {
            OutputView outputView = new OutputView();
            if (state)
            {
                Uri = new Uri("..\\Resources\\openiconReverse.png", UriKind.Relative);
            }
            else
            {
                Uri = new Uri("..\\Resources\\openicon.png", UriKind.Relative);

                foreach (Window item in Application.Current.Windows.OfType<OutputView>())
                {
                    item.Close();
                }
            }
        }

Xaml

<Grid Grid.RowSpan="2" Grid.Column="2">
            <ToggleButton Height="405" Width="30" 
                          Margin="0 -1.1 0 0" 
                          HorizontalAlignment="Right"
                          x:Name="OpenOutput" 
                          Command="{Binding CheckCommand}" 
                          CommandParameter="{Binding IsChecked,RelativeSource={RelativeSource Self}}" >
                
                <StackPanel Orientation="Vertical">
                    <Image Name="openicon" Source="{Binding Uri}"
                               Margin="0 0 2 15"/>
                </StackPanel>
            </ToggleButton>
        </Grid>

`Title="OutputView" Height="474" Width="346" WindowStyle="None"
        Left="1409" Top="296"
        ResizeMode="NoResize"`

I tried to adjust the position using the left and top attributes.

Answer 1

When you change the Popup.HorizontalOffset or Popup.VerticalOffset property value the Popup will automatically reposition itself relative to the new Popup.PlacementTarget location.

The following example creates a Popup that is located outside to the right of the application window and that will update the position when the window is being resized or moved:

MainWindow.xaml

<Window x:Name="MainWindowControl">
  <StackPanel>
    <ToggleButton x:Name="PopupExpander" 
                  Content="Show Popup attached to the right side of MainWindow" />
    <Popup x:Name="StickyPopup" 
           IsOpen="{Binding ElementName=PopupExpander, Path=IsChecked}" 
           PlacementTarget="{Binding ElementName=MainWindowControl}" 
           Placement="Right">
      <Grid Background="White" MinHeight="100">
        <TextBlock Text="Some content" />
      </Grid>
    </Popup>
  </StackPanel>
</Window>

MainWindow.xaml.cs

partial class MainWindow : Window
{
  public MainWindow()
  {
    InitializeComponent();
  }

  protected override void OnLocationChanged(EventArgs e)
  {
    base.OnLocationChanged(e);
    TriggerPopupPositionUpdate(this.StickyPopup);
  }

  protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
  {
    base.OnRenderSizeChanged(sizeInfo);
    TriggerPopupPositionUpdate(this.StickyPopup);
  }

  private void TriggerPopupPositionUpdate(Popup popup)
  {
    popup.HorizontalOffset += 1;
    popup.HorizontalOffset -= 1;
  }
}