automatically move control if not visible on screen

Question

I have a user control will be populated with list of userControls by a button add in the TOP left (stackPanel in the left of parent UserControl),

after many UserControls inserted the screen will be scrolled and the button add will not be visible I want to move the button on top of stackPanel to be visible if the stack panel visible I found this IsUserVisible to check if the button visible and it work if I call from a another button, but I want to make it automatically I found this to fire when LayoutUpdated event firing but it will be firing a lot. Any help to make the button visible in stack panel when user scroll down ?

this is befor adding the 4th user control

after adding a 4th user control this will be visible on screen

the button add will not be visible, i want to be moved on top visible of the left stackPanel

edit :

<Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition MaxWidth="60" />
         <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>
     <Grid Grid.Column="0">
         <Button x:Name="BtnAddNewUserControl" VerticalAlignment="Top"
                                Click="BtnAdd_OnClick"/>
     </Grid>

     <Grid Grid.Column="1">
        <StackPanel Name="StackPanelListUserControl" Orientation="Vertical">
        </StackPanel>
      </Grid>
  </Grid>

I don't want to make StackPanelListUserControl withScroll (the Height will be be change with the number of userControl inside) then after many user Control inserted the window will be with scroll to show the last userControls inserted, in this case the button BtnAddNewUserControl will not be visible in screen,

edit (after the comment):

in the comment BionicCode ask to make only the right part with scroll and fix the left Part, and this is my explanation :

just what I’m showing is itself in a user control that can be added, then my window has a stackPanelParent accept many userControlParent, each userControlParent contain what I’m showing this why I can’t make the scroll in this userControlParent to Show the userControlChild, the window will have 3-4 userControlParent each will have 6-7 userControlChild I have the button –adduserControlParent- fix in the left for the userControlParent but the button –adduserControlChild- is in userControlParent

Do you want to make the stack panel scrollable or simply the area with the UserControls? — OneTrickDragon, Aug 17 '21 at 12:44
@OneTrickDragon i wont the button add to move down when is not visible in screen — Akrem, Aug 17 '21 at 12:44
You will likely have to restructure your XAML Code and use a `Grid` to separate your controls into scrollable and non-scrollable content. — thabs, Aug 17 '21 at 13:11
Move the `Button` from the `ScrollViewer`? Please post your XAML for further help. — mm8, Aug 17 '21 at 14:12
Wrapping the controls into their own Grid is redundant. Doing this in a big application will even have negative impact on the rendering perfomance. Always try to keep the visual tree as flat as possible. To fix your problem use a ListBox instead of the StackPanel. You can hide the scroll bars but still scroll the user controls inside, while the button will remain fixed. The point is that you are onviously scrolling the complete Grid that also contains the Button - that of course will move the button outside the viewport. — BionicCode, Aug 19 '21 at 19:41
Or if you want to stick to the Stackpanel, for what reason ever, make sure to scroll the StackPanel's content only. — BionicCode, Aug 19 '21 at 19:42
You can use DataTriggers to toggle the visibility of the button based on the visibility of any other control. - Note that your question is very bad. It lacks any useful information to provide you with a usefule solution. You basically posted two images and asked for a "random" logic. Also it's not clear how you scroll and what you scroll here. An image of your UI alone is a very bad choice to describe the logic of your application or to describe a programming related problem in general. — BionicCode, Aug 19 '21 at 19:51
@BionicCode, sorry for the logic in the question, the problem the window with this problem have a lot of user Contols and do a lot of work, i want to simplify juste the part with my problem, — Akrem, Aug 19 '21 at 21:59
@BionicCode i can't use a the scroll in the stackpanel or in listBox because the window must show all the user control inserted, and as you said -The point is that you are onviously scrolling the complete Grid that also contains the Button- my need is if possible move the button down if not visible — Akrem, Aug 19 '21 at 22:02
You simplified the problem too much. The answer may be to not scroll the complete grid. Alternatively move the button outside the grid (then you can scroll the complete grid). I wonder how the window can show all controls. The space is limited. Maybe the user can resize the window too. At some point you need a scroll bar. And to me it sounds you are already scrolling, or how else does the button get out of the viewport? Waht I understand: you add controls to a StackPanel. After adding N controls you scroll to show the last added controls. While doing this the button gets moved out of the view. — BionicCode, Aug 19 '21 at 23:13
In your question you wrote *"then after many user Control inserted the window will be with scroll to show the last userControls inserted"*. Sounds like you are scrolling to me. Obviously you are scrolling the wrong elements due to grouping the elements wrong (button and stackpanel). — BionicCode, Aug 19 '21 at 23:16
@BionicCode All you said is right, just what I’m showing is itself in a user control that can be added, then my window has a stackPanelParent accept many userControlParent, each userControlParent contain what I’m showing this why I can’t make the scroll in this userControlParent to Show the userControlChild, the window will have 3-4 userControlParent each will have 6-7 userControlChild I have the button –adduserControlParent- fix in the left for the userControlParent but the button –adduserControlChild- is in userControlParent — Akrem, Aug 20 '21 at 10:09
Please don't feel offended, but your english seems to be too broken to describe the complex situtation properly. You are really difficult to understand. Instead of using words provide a brief code example that shows what you are currently doing. Code is *always* worth more than words. Then we can give you exact instructions on how to fix your issue. Your code example does not show any userControlParent or userControlChild. When their relationship is important then please show their realtionship in your code. Otherwise there is too much guessing as your explanations only add more confusion. — BionicCode, Aug 20 '21 at 10:47
Now that you brought that many user controls into the game it is also not clear what the 4th control is that you are adding here (which causes the button to be clipped or scrolled out of the viewport). So please show the complete layout of your view, so that we can understand which control hosts what and where you scroll. — BionicCode, Aug 20 '21 at 10:52
@BionicCode, sorry english is my 3rd language; i know my demand not clear :( i voted to close this question (i can't delete it) — Akrem, Aug 20 '21 at 16:52

score 1 · Answer 1 · answered Aug 20 '21 at 10:06

Your code doesn't scroll. Which means in your real code you probably have a ScrollViewer. You probably have the ScrollViewer surrounding everything. Here's the ScrollViewer surrounding only the StackPanel which then works as you want - scrolling only scrolls StackPanelListUserControl and not the Button.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition MaxWidth="60" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0">
        <Button x:Name="BtnAddNewUserControl" VerticalAlignment="Top" Click="BtnAdd_OnClick">btn</Button>
    </Grid>
    <Grid Grid.Column="1">
        <ScrollViewer>
            <StackPanel Name="StackPanelListUserControl" Orientation="Vertical">
                <TextBlock FontSize="40">                    
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                    abc<LineBreak/>
                </TextBlock>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Grid>

score 0 · Answer 2 · answered Aug 19 '21 at 11:59

You have to move your command button out of the stackpanel, and to put stackpanel inside a scrollviewer.

Since you did not provide any code I post a sample of what it might look like :

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<DockPanel LastChildFill="True">
    <Button DockPanel.Dock="Top" Content="Add" Command="{Binding Path=AddControlCommand, Mode=OneTime}">
    </Button>
    <ScrollViewer>
        <StackPanel x:Name="myPanel">
            <UserControl Height="300" Content="Foo"/>
            <UserControl Height="300" Content="Bar"/>
            <UserControl Height="300" Content="Daz"/>
            <UserControl Height="300" Content="Please"/>
            <UserControl Height="300" Content="Get"/>
            <UserControl Height="300" Content="Vaccinated"/>
        </StackPanel>
    </ScrollViewer>
</DockPanel>

automatically move control if not visible on screen

2 Answers2