0

I encounter a problem that I am not sure how to fix. I have "AddAccount" (Button), "AccountsTextBlock" and a ListBox on the main window. If not user is added, the list box will be hidden, once user is added, it will show the ListBox, AddAccount and AccountsTextBlock on the same screen, but AddAccount and AccountsTextBlock will be at different positions from when there's no user. The problem is that AddAccount and AccountsTextBlock didn't show, but a dotted rectangle shows.

<Grid>
    <Canvas>
        <TextBlock x:Name="AddAccountTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Height="60" Width="369" Text="Add account to allow for simple access to your company resources&#xD;&#xA;" SnapsToDevicePixels="True" Canvas.Left="38" Canvas.Top="313"/>
        <Button x:Name="AddAccount" Content="Add Account" Canvas.Left="145" Canvas.Top="333" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" RenderTransformOrigin="0.466,0.977" IsCancel="True" Height="40" Foreground="White" Background="Blue" Click="OnAddAccount"/>
        <TextBlock x:Name="AccountsTextBlock" Canvas.Left="176" TextWrapping="Wrap" Text="Accounts" Canvas.Top="10" Height="33" Width="68" FontSize="16" FontFamily="Tahoma"/>
    </Canvas>
    <ListBox x:Name="accounts" HorizontalAlignment="Left" Height="237" VerticalAlignment="Top" Width="444" SelectionChanged="ListBox_SelectionChanged" Background="White" BorderBrush="White" Margin="0,47,0,0" RenderTransformOrigin="0.5,0.5">
        <ListBox.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform AngleX="0.384"/>
                <RotateTransform/>
                <TranslateTransform X="-0.794"/>
            </TransformGroup>
        </ListBox.RenderTransform>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Height" Value="100"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border Name="_Border" BorderBrush="Gray" BorderThickness="0.5"
                            Padding="2"
                            SnapsToDevicePixels="true">
                                <ContentPresenter />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter TargetName="_Border" Property="Background" Value="LightSkyBlue"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="3">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" Width="100" Source="{Binding Path=imagePath}" />
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" Text="{Binding Path=userInfo}"></TextBlock>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

public MainWindow()
{
    InitializeComponent();

    using (RegistryKey key = Registry.CurrentUser.CreateSubKey(authenticatorRegistryKey))
    {
        Object valueStr = Registry.GetValue(authenticatorRegistryKey, addedUsersRegistryValueName, null);
        if (valueStr == null)
        {
            //no users added yet, hide list box and move add button
            accounts.Visibility = Visibility.Collapsed;
            AccountsTextBlock.Visibility = Visibility.Collapsed;
            Canvas.SetLeft(AddAccountTextBlock, (Application.Current.MainWindow.Width - AddAccountTextBlock.Width) / 2);
            Canvas.SetTop(AddAccountTextBlock, (Application.Current.MainWindow.Height - AddAccountTextBlock.Height) / 2 - AddAccount.Height + 10);
            Canvas.SetLeft(AddAccount, (Application.Current.MainWindow.Width - AddAccount.Width) / 2);
            Canvas.SetTop(AddAccount, (Application.Current.MainWindow.Height - AddAccount.Height) / 2);
        }
        else
        {
            //show the added user
            List<UserInfo> items = new List<UserInfo>();
            items.Add(new UserInfo()
            {
                userInfo = "abcdefg",
                imagePath = ""
            });

            accounts.ItemsSource = items;
            AccountsTextBlock.Visibility = Visibility.Visible;
            accounts.Visibility = Visibility.Visible;
        }
    }
}

private void OnAddAccount(object sender, RoutedEventArgs e)
{

    SignInUrlWindow signInUrlWindow = new SignInUrlWindow();
    signInUrlWindow.Left = Application.Current.MainWindow.Left;
    signInUrlWindow.Top = Application.Current.MainWindow.Top;
    signInUrlWindow.Width = Application.Current.MainWindow.Width;
    signInUrlWindow.Height = Application.Current.MainWindow.Height;
    signInUrlWindow.ShowDialog();

    List<UserInfo> items = new List<UserInfo>();
    items.Add(new UserInfo()
    {
        userInfo = "abcdefg",
        imagePath = ""
    });

    accounts.ItemsSource = items;

    accounts.Visibility = Visibility.Visible;
    AddAccount.Visibility = Visibility.Visible;
    AccountsTextBlock.Visibility = Visibility.Visible;
}

enter image description here

Keith Stein
  • 6,235
  • 4
  • 17
  • 36
JennyS
  • 119
  • 9
  • Have you considered using panels other than Canvas here? And why do you place your Canvas with a ListBox inside a Grid when you're placing them at the same column and row of it? – Gleb Dec 06 '19 at 07:19
  • 1
    It seems likely you've chosen a bad approach to layout. In any case, I don't follow why you have that canvas there at all. Why aren't you using a grid with rows and columns? – Andy Dec 06 '19 at 12:02
  • In order to explore this I suggest you first comment out all your code that is hiding and manipulating sizes and or position of UI. See what you get. – Andy Dec 06 '19 at 12:03
  • I am new to wpf, the use canvas just because the button position is dynamic. Could you suggest new layout? – JennyS Dec 06 '19 at 19:49
  • The most useful panels for UI layout are probably the Grid and StackPanel. There are a lot of wpf-tutorials out there, here is one on layout that I think is good as a starting point: https://www.wpftutorial.net/LayoutProperties.html – Magnus Jan 05 '20 at 11:57
  • Another tip is to use the MVVM pattern to decouple your view and model, see for example this SO question for good learning resources: https://stackoverflow.com/q/1405739/19496 – Magnus Jan 05 '20 at 12:05

0 Answers0