控制尺寸有最后一个项目尺寸

Question

该控件是在左上角和右下角显示一个设计，其名称和价格。我正在从 Windows 窗体重新编写程序，并在那里创建了一个自定义控件。我只是想在 WPF 和它的斗争巴士中重现它 该控件适用于 atm，但不适用于第一个图像的大小调整 或者如果我拉出的图像与之前的图像大小不同。

问题是代码在加载事件之后才获得正确的大小。

“所以我发现主要问题是如何获得大小然后触发第二个事件来更新叠加层。”

控制结果的图像：

！ https://imgur.com/a/ubwjjbT

发出图片第二次加载不同纵横比：

！ https://imgur.com/wDukGSp

再次加载的第二张图片修复了尺寸问题：

！ https://imgur.com/JOUxv55

此外，我一直在阅读有关尝试将此控件转换为可重用控件的任何建议/建议，以了解 WPF 中的系统从哪里开始，将不胜感激

下面的代码是我得到我想要的基本布局的工作。我仍然需要更好地对其进行主题化，但整体布局大多是正确的。 我尝试使用画布，但无法获得正确的布局

据我所知，这可能是完全错误的，所以如果他们有更好的方法，请说明。我不想在错误的道路上摸索。

Xaml 修复是在源加载后更新的 Sizechanged 事件。

 <Image x:Name="pbMainImage"  Source="{Binding Path=(local:SV.PbMainImage), Converter={StaticResource ImageConverter},
                        Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="center" SizeChanged="name_price_sizingbclick"/>

<Button Name="pbbutton" Style="{StaticResource ImageButtonStyle}" Grid.ColumnSpan="6"  Click="pbmain_Click" SizeChanged="name_price_sizingbclick">

    <Border Name="Test" Grid.Row="0"   Margin="{Binding Path=(local:SV.pading)}" Background="#252525">

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding Path=(local:SV.Imagespacing)}"/>
                <ColumnDefinition Width=".2*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width=".2*"/>
                <ColumnDefinition Width="{Binding Path=(local:SV.Imagespacing)}"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height=".15*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height=".15*"/>
            </Grid.RowDefinitions>

            <local:ZoomBorder x:Name="border" Grid.ColumnSpan="5" Grid.RowSpan="3" ClipToBounds="True" >
                <Image x:Name="pbMainImage"  Source="{Binding Path=(local:SV.PbMainImage), Converter={StaticResource ImageConverter},
Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="center"/>
            </local:ZoomBorder>

            <TextBlock Grid.Column="1" Background="Orange" Opacity=".8"  FontWeight="Bold" Padding="10 0 10 0" TextAlignment="Center" >
    <Viewbox>
        <TextBlock Text="{Binding Path=(local:SV.ActiveDesign)}" TextAlignment="Center"/>
    </Viewbox>
</TextBlock>

            <TextBlock Grid.Column="3"  Grid.Row="3" Background="GreenYellow" Opacity=".8" FontWeight="Bold" Padding="10 0 10 0" TextAlignment="Center"  >
    <Viewbox>
        <TextBlock  Text="{Binding Path=(local:SV.sprice),StringFormat=${0}}" TextAlignment="Center" />
    </Viewbox>
</TextBlock>

            <Grid Grid.Row="3" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Button Panel.ZIndex="2" Grid.Row="1" Style="{StaticResource RoundCorner}" Content="4" Click="prevImg" Visibility="Hidden"/>
            </Grid>
            <Grid Grid.Row="3" Grid.Column="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Button Panel.ZIndex="2" Grid.Row="1" Style="{StaticResource RoundCorner}" Content="4" Click="nextvImg" Visibility="Hidden" />
            </Grid>

        </Grid>
    </Border>
</Button>

C#

//this is what moves the overlays around. on source change it runs when source is changed
public static void name_price_sizing(object sender, EventArgs e)
{
    MainWindow myWindow = Application.Current.MainWindow as MainWindow;
    Button p = myWindow.pbbutton;
    Image i = myWindow.pbMainImage;
    if (toggle == 0)
    {
        SV.Imagespacing = Math.Round(((p.ActualWidth - i.ActualWidth) / 2) / 2, MidpointRounding.AwayFromZero) * 2 - 14;
    }
    else { SV.Imagespacing = Math.Round(((p.ActualWidth - i.ActualWidth) / 2) / 2, MidpointRounding.AwayFromZero) * 2; }
    if (SV.Imagespacing < 0) { SV.Imagespacing = 0; }
}
//this is what moves the overlays around. on control click to resize for fullscreen
public void name_price_sizingbClick(object sender, EventArgs e)
{

    //  StaticVariables.Imagespacing = (pbbutton.ActualWidth - pbMainImage.ActualWidth) / 2;
    if (toggle == 0) { SV.Imagespacing = Math.Round(((pbbutton.ActualWidth - pbMainImage.ActualWidth) / 2) / 2, MidpointRounding.AwayFromZero) * 2 - 14; } else { SV.Imagespacing = Math.Round(((pbbutton.ActualWidth - pbMainImage.ActualWidth) / 2) / 2, MidpointRounding.AwayFromZero) * 2; }
    if (SV.Imagespacing < 0) { SV.Imagespacing = 0; }

}

Answer 1

我已经解决了我的问题，不知道如何将其标记为已解决。 我在图像控制中添加了SizeChanged="name_price_sizingbclick"，它解决了尺寸问题。我仍然希望查看代码以获取有关如何将此控件变为可重用用户控件的提示和任何帮助。

由于操作员自己回答了这个问题，而不是把它写成答案，所以把它删掉了。